// calendar popover
.clock-display-box {
  spacing: 4px;

  .clock {
    padding-left: 6px;
    padding-right: 6px;
  }
}

#calendarArea {
  padding: 12px 0;
}

.calendar {
  margin: 2px 12px;
  border: none;
  box-shadow: none;
  background-color: if($variant == 'light', rgba(white, 0.75), rgba(lighten($base_color, 8%), 0.75));
  padding: 4px 8px;
  text-shadow: none;
  border-radius: $mn_radius;
}

.datemenu-today-button,
.datemenu-displays-box,
.message-list-sections {
  margin: 4px 8px;
}

.datemenu-calendar-column {
  spacing: 8px;
  border: none;
  padding: 0 $container_padding * 2;

  &:ltr { margin-right: $container_padding * 2; border-left-width: 0; }
  &:rtl { margin-left: $container_padding * 2; border-right-width: 0; }

  .datemenu-displays-section { padding-bottom: 0; }
  .datemenu-displays-box { spacing: 8px; }
}

.datemenu-today-button {
  min-height: $menuitem_size * 2 - 4px * 2;
  border: none;
  box-shadow: none;
  background: none;
  padding: 4px 8px;
  text-shadow: none;
  color: $alt_fg_color;

  // weekday label
  .day-label {
    @include font(title);
    font-weight: bold;
  }

  // date label
  .date-label {
    @include font(headline);
  }
}

.calendar-month-label {
  height: $menuitem_size - 4px * 2;
  margin: 2px;
  padding: 6px 16px;
  color: $fg_color;
  font-weight: bold;
  text-align: center;
  text-shadow: none;

  &:focus { background-color: $divider_color; }
}

.pager-button {
  width: $menuitem_size;
  height: $menuitem_size;
  margin: 2px;
  border-radius: 100px;
  background-color: transparent;
  color: $fg_color;
  &:hover, &:focus { background-color: $divider_color; }
  &:active { background-color: $track_color; }
}

.calendar-change-month-back { //arrow back
  padding: 0 2px;
  background-image: url("assets/calendar-arrow-left.svg");
  &:rtl { background-image: url("assets/calendar-arrow-right.svg"); }
}

.calendar-change-month-forward { //arrow foreward
  padding: 0 2px;
  background-image: url("assets/calendar-arrow-right.svg");
  &:rtl { background-image: url("assets/calendar-arrow-left.svg"); }
}

// prev/next month icons
.calendar-change-month-back StIcon,
.calendar-change-month-forward StIcon {
  icon-size: 16px;
}

.calendar-day-base {
  @include font(caption);
  text-align: center;
  width: $menuitem_size;
  height: $menuitem_size;
  padding: 2px;
  margin: 2px;
  border-radius: 1000px;
  color: $alt_fg_color;
  font-feature-settings: "tnum";

  &:hover, &:focus { background-color: $divider_color; }

  &:active {
    color: $alt_fg_color;
    background-color: $track_color;
    border-color: transparent; //avoid jumparound due to today
  }

  &:selected {
    color: $fg_color;
    background-color: $track_color;
    border-color: transparent; //avoid jumparound due to today
  }

  &.calendar-day-heading {  //day of week heading
    width: $menuitem_size;
    height: $menuitem_size - 7px;
    margin-top: 2px;
    padding: 7px 0 0;
    border-radius: 100px;
    background-color: transparent;
    color: $hint_fg_color;
    @include font(caption);
    font-weight: bold;
    text-align: center;
  }
}

.calendar-day { //border collapse hack - see calendar.js
  border-width: 0;
}

.calendar-day-top { border-top-width: 0; }
.calendar-day-left { border-left-width: 0; }
.calendar-nonwork-day {
  color: $fg_color;
}

.calendar-today {
  font-weight: bold;
  color: $light_alt_fg_color;
  background-color: $primary_color;
  border: none;

  &:hover, &:focus {
    background-color:lighten($primary_color, 3%);
    color: $light_alt_fg_color;
  }

  &:active, &:selected {
    background-color: $primary_color;
    color: $light_alt_fg_color;

    &:hover, &:focus {
      background-color:lighten($primary_color, 3%);
      color: $light_alt_fg_color;
    }
  }
}

.calendar-day-with-events {
  color: $hint_fg_color;
  background-image: url("assets/calendar-today.svg");

  &.calendar-work-day {
    color: $hint_fg_color;
    font-weight: bold;
  }
}

.calendar-other-month-day {
  color: $disabled_fg_color;
  opacity: 0.5;
}

.calendar-week-number {
  width: 22px;
  height: 16px;
  margin: 6px 6px 6px 4px;
  padding: 0 0;
  border-radius: $bt_radius;
  background-color: if($variant == 'light', rgba(black, 0.05), rgba(white, 0.05));
  color: $hint_fg_color;
  font-size: inherit;
  font-weight: bold;
  text-align: center;
}

.world-clocks-button,
.weather-button,
.events-button {
  @extend %popover_bubble;
  padding: 12px;
  margin: 2px 4px;
}

.world-clocks-header,
.weather-header,
.events-section-title {
  color: $alt_fg_color;
  font-weight: bold;
}

// Events
.events-button {
  .events-box {
    spacing: 6px;
  }

  .events-list {
    spacing: 12px;
    text-shadow: none;
  }

  .events-title {
    color: $hint_fg_color;
    font-weight: bold;
    margin-bottom: 4px;
    text-shadow: none;
  }

  .event-time {
    color: $hint_fg_color;
    font-feature-settings: "tnum";
  }
}

// World Clock
.world-clocks-button {
  .world-clocks-city {
    color: $hint_fg_color;
    font-weight: bold;
    font-size: 0.9em;
  }

  .world-clocks-time {
    color: $hint_fg_color;
    font-feature-settings: "tnum";
    font-size: 1.2em;

    &:ltr { text-align: right; }
    &:rtl { text-align: left; }
  }

  .world-clocks-timezone {
    color: $hint_fg_color;
    font-feature-settings: "tnum";
    font-size: 0.9em;
  }
}

.world-clocks-grid,
.weather-grid {
  spacing-rows: 0.4em;
  spacing-columns: 0.8em;
}

// Weather
.weather-button {
  margin-bottom: 6px;

  .weather-box {
    spacing: 12px;
  }

  .weather-header-box {
    spacing: 6px;
  }

  .weather-header {
    color: $alt_fg_color;
    font-weight: bold;

    &.location {
      font-weight: normal;
      color: $hint_fg_color;
    }
  }

  .weather-grid {
    spacing-rows: 6px;
    spacing-columns: 12px;
  }

  .weather-forecast-time {
    color: $alt_fg_color;
    font-feature-settings: "tnum";
    font-size: 9pt;
    font-weight: normal;
    padding-top: 0.2em;
    padding-bottom: 0.4em;
  }

  .weather-forecast-icon {
    icon-size: 32px;
  }

  .weather-forecast-temp {
    font-weight: bold;
  }
}

// Message list
.message-list {
  width: 31.5em;
  padding: 0 12px;
  text-shadow: none;

  .message-list-placeholder { spacing: 12px; }
}

.message-list-clear-button.button {
  background-color: transparent;
  &:hover, &:focus { background-color: $divider_color; }
  &:active { background-color: $track_color; }
  margin: 8px 8px 0;
}

.message-list-section,
.message-list-sections,
.message-list-section-list {
  spacing: 8px;
}

.message-list-section-list:ltr {
  padding-left: 0;
}

.message-list-section-list:rtl {
  padding-right: 0;
}

// do-not-disturb + clear button
.message-list-controls {
  margin: 8px 16px 0;
  // NOTE: remove the padding if notification_bubble could remove margin for drop shadow
  padding: 4px;
  spacing: 16px;
}

.message {
  margin: 0 4px 6px;
  @extend %popover_bubble;

  // icon container
  .message-icon-bin {
    margin: 8px 0;
    padding: 8px 0px 8px 8px;
    &:rtl { padding: 8px 8px 8px 0px; }

    // icon size and color
    > StIcon {
      icon-size: 32px; // 32px
      -st-icon-style: symbolic;
    }

    // fallback
    > .fallback-app-icon {
      width: 16px;
      height: 16px;
    }
  }

  .message-secondary-bin {
    padding: 0 8px;

    > .event-time {
      min-height: $small_size - 2px;
      color: $hint_fg_color;
      font-size: 1em;
      text-align: right;
      /* HACK: the label should be baseline-aligned with a 1em label, fake this with some bottom padding */
      padding-bottom: 0.13em;
    }
  }

  .message-title {
    min-height: $small_size - 2px;
    padding-top: 2px;
    color: $fg_color;
    font-weight: bold;
    font-size: 1em;
  }

  .message-content {
    min-height: $menuitem_size * 2 - 8px * 2;
    padding: 8px;
    color: $hint_fg_color;
    font-size: 1em;
  }

  // close button
  .message-close-button {
    color: $alt_fg_color;
    padding: 0;
    height: 24px;
    width: 24px;
    border-radius: 100px;

    &:hover, &:active { color: $fg_color; }
    &:hover, &:focus { background-color: $divider_color; }
    &:active { background-color: $track_color; }
  }

  // body
  .message-body {
    color: $hint_fg_color;
  }
}

// URLs in messages
.url-highlighter {
  link-color: $link_color;
}

.message-media-control {
  margin: 16px 4px;
  padding: 8px;
  border-radius: 100px;
  color: $alt_fg_color;
  &:hover, &:focus { color: $fg_color; background-color: $divider_color; }
  &:active { color: $fg_color; background-color: $track_color; }
  &:insensitive { color: $disabled_fg_color; }

  &:last-child:ltr { margin-right: 16px; padding-right: 8px; }
  &:last-child:rtl { margin-left: 16px; padding-left: 8px; }
}

.media-message-cover-icon {
  icon-size: 32px !important;
  margin: 0 0px 0 4px !important;
  &:rtl { margin: 0 4px 0 0px !important; }
  &.fallback {
    icon-size: 16px !important;
    padding: 8px;
    border: none;
    border-radius: $bt_radius;
    background-color: $divider_color;
    color: $hint_fg_color;
  }
}
