/* Date/Time Menu */

// overall menu
#calendarArea {
  padding: $base_margin;
}

// Calendar menu side column
.datemenu-calendar-column {
  spacing: $base_padding;
  &:ltr {padding-left: $base_padding;}
  &:rtl {padding-right: $base_padding;}
  .datemenu-displays-box {spacing: $base_padding;}
}

/* today button (the date) */
.datemenu-today-button {
  @include card($flat: true);
  padding: $base_padding * 1.5;

  // weekday label
  .day-label {
    @extend %heading;
  }

  // date label
  .date-label {
    @extend %title_2;
  }
}

/* Calendar */
.calendar {
  @include card($flat: true);
  margin-top: 0;
  padding: 0;

  // month header
  .calendar-month-header {

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

    // month label
    .calendar-month-label {
      @extend %heading;
      @extend .button, .flat;
      color: $fg_color !important;
      padding: 8px 0;
      width: 10em;
      border-radius: $forced_circular_radius;
      text-align: center;
    }

    .pager-button {
      @extend .icon-button, .flat;
      height: 2.6em;
      width: 2.6em;
      padding: 0;
    }
  }

  // day style
  .calendar-day {
    @extend %numeric;
    @extend %smaller;
    @extend .button, .flat;
    border-radius: $forced_circular_radius;
    height: 3em;
    width: 3em;
    margin: 2px;
    padding: 0;
    font-weight: bold;
    text-align: center;

    &.calendar-weekday {}
    &.calendar-weekend {
      color: $insensitive_fg_color;
    }

    &.calendar-other-month {
      color: transparentize($insensitive_fg_color, 0.2);
      font-weight: normal;

      @if $contrast == 'high' {
        color: $insensitive_fg_color;
        font-style: italic; // differentiate with a font-style instead of text color
      }
    }

    &.calendar-today {
      @extend .default;
      border: none;
      &.calendar-day-with-events {
        background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style
      }
    }

    &.calendar-day-with-events {
      background-image: if($variant == 'light', url("resource:///org/gnome/shell/theme/calendar-today-light.svg"),url("resource:///org/gnome/shell/theme/calendar-today.svg"));
      background-size: contain;
    }
  }

  // day of week heading
  .calendar-day-heading {
    @extend %numeric;
    @extend %smaller;
    @extend .button, .flat;
    font-weight: bold;
    text-align: center;
    margin: $base_margin;
    padding: $base_padding * 0.5 $base_padding;
    border-radius: $base_border_radius;
  }

  // week number style
  .calendar-week-number {
    @extend %smaller;
    font-weight: bold;
    font-feature-settings: "tnum";
    text-align: center;
    margin: $base_padding;
    padding: 0 $base_padding;
    border-radius: $base_border_radius * 0.5;
    background-color: transparentize($insensitive_fg_color, .8);
    color: $insensitive_fg_color;
    border: 1px solid transparent;

    @if $contrast == 'high' {
      border-color: $hc_inset_color;
    }
  }
}

/* Events */
.events-button {
  @include card;

  .events-box {
    spacing: $base_padding;
  }

  .events-list {
    spacing: 2 * $base_padding;
    color: $fg_color;
  }

  .events-title {
    @extend %heading;
    margin-bottom: $base_margin;
  }

  .event-time {
    @extend %numeric;
    @extend %caption;
    color: $insensitive_fg_color;
  }
}

/* World clocks */
.world-clocks-button {
  @include card;

  .world-clocks-grid {
    spacing-rows: $base_padding;
    spacing-columns: $base_padding * 2;
  }

  // title
  .world-clocks-header {
    @extend %heading;
    color: $insensitive_fg_color;
  }

  // city label
  .world-clocks-city {
    color: $fg_color;
  }

  // timezone time
  .world-clocks-time {
    @extend %heading;
    @extend %numeric;
    color: $fg_color;

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

  // timezone offset label
  .world-clocks-timezone {
    @extend %numeric;
    @extend %caption;
    color: $insensitive_fg_color;
  }
}

/* Weather */
.weather-button {
  @include card;

  .weather-box {
    spacing: $base_padding + $base_margin;
  }

  .weather-header-box {
    spacing: $base_padding;
  }

  .weather-header {
    color: $insensitive_fg_color;
    @extend %heading;

    &.location {
      font-weight: normal;
    }
  }

  .weather-grid {
    spacing-rows: $base_padding;
    spacing-columns: $base_padding * 2;
  }

  .weather-forecast-time {
    @extend %numeric;
    @extend %caption;
    color: darken($fg_color,30%);
    padding-top: 0.2em;
    padding-bottom: 0.4em;
  }

  .weather-forecast-icon {
    icon-size: $large_scalable_icon_size;
  }

  .weather-forecast-temp {
    @extend %heading;
  }
}