//
// @file
//
// Used for single and multiple event pages (not calendar views).
//

@import "bootstrap/mixins.less";
@import "timely-mixins.less";

// ================
// = Events pages =
// ================

@event-font-size: @font-size-base;
@event-line-height: @line-height-computed * 1.6;

.ai1ec-single-event,
.ai1ec-multi-event {
  .ai1ec-event-details {
    margin: @event-line-height * 0.6 0;
    .ai1ec-row {
      margin-bottom: @event-line-height * 0.2;
    }
  }

  .ai1ec-field-label {
    line-height: 25px;
  }

  .osec-timezone-info {
    font-size: small;
    line-height: 1.2;
  }
  .osec-timezone-info--gmt {
    white-space: nowrap;
  }

  // Date/time & recurrence.
  .ai1ec-time .ai1ec-field-value {
    font-size: 1.2em;
    .ai1ec-allday-badge {
      font-size: 0.75em;
      line-height: 1.4em;
    }
  }
  .ai1ec-recurrence {
    vertical-align: bottom;
    .ai1ec-btn.ai1ec-disabled {
      cursor: default;
      .ai1ec-opacity( 1 );
      pointer-events: auto;
    }
  }

  // Categories & tags.
  .ai1ec-category {
    font-size: 0.8em;
  }
  .ai1ec-tag {
    font-size: 0.85em;
  }

  // Location & map.
  .osec-map-container {
    border-radius: @border-radius-base;
    position: relative;
    padding-bottom: 3px;
    padding-top: 3px;
    z-index: 1;
  }
  .osec-map-link {
    vertical-align: middle;
    white-space: nowrap;
    .dashicons {
      vertical-align: middle;
      font-size: 1.1rem;
    }
  }
  .leaflet-control-attribution {
    svg {
      /* No borders, no nations, no wars. */
      display: none !important;
    }
  }


  .osec-map-placeholder {
    border-radius: 4px;
    color: @link-color;
    cursor: pointer;
    height: 12em;
    border: 1px dashed @table-border-color;
    margin-bottom: 0.3em;
    text-align: center;
    width: 100%;
    &:hover {
      border-color: darken( @table-border-color, 15% );
      color: @link-hover-color;
    }
    strong {
      position: relative;
      top: 45%;
    }
  }
  .osec-map-container-hidden {
    display: none;
  }
  .ai1ec-contact span {
    display: inline-block;
    white-space: nowrap;
    i:first-child:before {
      text-align: center;
      width: 1.7em;
    }
  }
}

// EventSingleView event page only.
.ai1ec-single-event {
  position: relative;
  font-size: @event-font-size;
  line-height: @event-line-height;
  // Event avatar/featured image.
  .ai1ec-event-avatar {
    max-width: 40%;
    img {
      max-width: 300px;
      max-height: 300px;
      min-height: 0;
      width: 100%;
    }
  }
  .ai1ec-event-details {
    overflow: hidden;
  }
  .ai1ec-actions {
    .ai1ec-pull-right;
    margin-left: 10px;
    .ai1ec-btn-group-vertical {
      margin-bottom: 10px;
      display: block;
    }
    .ai1ec-btn {
      font-size: @font-size-small;
      text-align: left;
    }
    .ai1ec-fa-fw {
      width: 20px;
    }
  }

  .osec-location {
    line-height: 1.4;
  }
}

// This appears in a tooltip, so cannot be wrapped by a class qualifier.
.ai1ec-recurrence-exclude {
  font-size: smaller;
  color: @text-muted;
}

// Multi-event loop and event excerpts.
.ai1ec-multi-event,
.ai1ec-excerpt {
  font-size: @event-font-size;
  line-height: @event-line-height;
  .ai1ec-field-label {
    margin-top: @event-font-size * 0.1;
  }
}

.ai1ec-excerpt {
  margin-bottom: @event-line-height * 0.5;
}

// Footer.
.ai1ec-event-footer {
  color: @text-muted;
  clear: both;
  margin: @line-height-computed / 2 0;
}