/* Date/Time Menu */

// overall menu
#calendarArea {
  padding:0;
  margin:0;
}

// Calendar menu side column
.datemenu-calendar-column {
  spacing: 0;
  border: 0 solid $bubble_borders_color;
  padding: $base_padding * 2;
  padding-bottom: 3em; // account for the notifications clear button
  padding-top:0;

  &:ltr {margin-right: $base_margin * 2; border-left-width: 1px; }
  &:rtl {margin-left: $base_margin * 2; border-right-width: 1px; }

  // today button (the date)
  .datemenu-today-button {
    padding: $base_padding * 1.5;
    margin: $base_margin;
    border: 1px solid transparent;
    border-radius: $base_border_radius + 2px;

    &:hover { @include button(hover);}
    &:focus { @include button(focus);}

    &:active {
      @include button(active);
    }

    // weekday label
    .day-label {
      @include fontsize($base_font_size+1);
      font-weight: bold;
    }

    // date label
    .date-label {
      @include fontsize($base_font_size+7);
      font-weight: 1000;
    }
  }

  // calendar
  .calendar {
    @extend %notification_bubble;
    margin:$base_margin !important;
    margin-bottom: $base_padding + $base_margin !important;
    padding:$base_padding !important;

    // more below for sub-elements
  }

  .datemenu-displays-section {
    margin:0;
  }

  .datemenu-displays-box {
    spacing: $base_spacing;
    margin:0;

    // world clocks and weather
    .world-clocks-button,
    .weather-button {
      @extend %notification_bubble;
      padding:$base_padding !important;
    }
  }
}

.events-section-title {
  color: desaturate(darken($fg_color,40%), 10%);
  font-weight: bold;
  border-radius: 4px;
  padding: .4em;
}

/* Calendar */
.calendar {

  // month
  .calendar-month-label {
    color: lighten($fg_color,5%);
    font-weight: bold;
    padding: 8px 0;
    &:focus {}
  }

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

  .pager-button {
    background-color: transparent;
    height: 32px;
    width: 32px;
    border-radius: $base_border_radius;
    &:hover, &:focus { background-color: lighten($hover_bg_color, 5%); }
    &:active { background-color: $active_bg_color; }
  }


  $calendar_day_size: 32px;

  .calendar-day-base {
    @include fontsize($base_font_size - 3);
    text-align: center;
    width: $calendar_day_size;
    height: $calendar_day_size;
    padding: 0;
    margin: 2px;
    border-radius: $calendar_day_size * 0.5 + 2px;
    border: 1px solid transparent; //avoid jumparound due to today
    font-feature-settings: "tnum";
    &:hover, &:focus { background-color: $hover_bg_color; }
    &:active,&:selected {
      color: lighten($fg_color,10%);
      background-color: darken($bg_color,5%);
    }

    // day of week heading
    &.calendar-day-heading {
      color: lighten($fg_color,10%);
      margin-top: 1em;
      @include fontsize($base_font_size - 4);
    }
  }
  .calendar-day { //border collapse hack - see calendar.js
    border-width: 0;
  }

  .calendar-day-top {
    border-top-width: 1px;
  }

  .calendar-day-left { border-left-width: 1px; }
  .calendar-work-day {}
  .calendar-nonwork-day {
    color: $insensitive_fg_color;
  }

  // Today
  .calendar-today {
    font-weight: bold;
    border: 1px solid transparent;
    background-color: $selected_bg_color;
    color: $selected_fg_color;

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

    &:active,&:selected {
      background-color: $selected_bg_color;
      color: $selected_fg_color;
      &:hover,&:focus {
        background-color:lighten($selected_bg_color, 3%);
        color: $selected_fg_color;
      }
    }

  }
  .calendar-day-with-events {
    color: lighten($fg_color,10%);
    font-weight: bold;
    background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg");
  }

  .calendar-other-month-day {
    color: transparentize($fg_color ,0.5);
    opacity: 0.5;
  }

  .calendar-week-number {
    @include fontsize($base_font_size - 4);
    font-weight: bold;
    height: 1.8em;
    width: 2.3em; 
    border-radius: 2px;
    padding: 0.5em 0 0;
    margin: 6px;
    background-color: darken($bg_color, 2%);
    color: lighten($fg_color, 5%);
  }
}


/* Weather */
.weather-box {
  spacing: $base_spacing;
  padding:$base_padding;

  .weather-header {
    color: desaturate(darken($fg_color,40%), 10%);
    font-weight: bold;
    &.location {
      font-weight: normal;
      @include fontsize($base_font_size - 1);
    }
  }

  .weather-grid {
    margin-top: $base_margin;
    spacing-rows: $base_spacing;
    spacing-columns: $base_spacing * 2;
  }

  .weather-forecast-time {
    color: darken($fg_color,30%);
    font-feature-settings: "tnum";
    @include fontsize($base_font_size - 2);
    font-weight: normal;
    padding-top: 0.2em;
    padding-bottom: 0.4em;
  }

  .weather-forecast-icon {
    icon-size: $base_icon_size * 2;
  }

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

/* World clocks */
.world-clocks-grid {
  padding:$base_padding;
  spacing-rows: $base_spacing;
  spacing-columns: $base_spacing * 2;

  // title
  .world-clocks-header {
    color: desaturate(darken($fg_color,40%), 10%);
    font-weight: bold;
  }

  // city label
  .world-clocks-city {
    color: $fg_color;
    @include fontsize($base_font_size);
    font-weight: normal;
  }

  // timezone time
  .world-clocks-time {
    font-weight: bold;
    color: $fg_color;
    font-feature-settings: "lnum";
    @include fontsize($base_font_size);
    text-align: right;
  }

  // timezone offset label
  .world-clocks-timezone {
    color: darken($fg_color,20%);
    font-feature-settings: "tnum";
    @include fontsize($base_font_size - 1);
  }
}