/* Date/Time Menu */

// overall menu
#calendarArea {
  padding: $space-size 0 !important;
}

.calendar {
  padding: 0 !important;
  margin: 0 !important;
  border: none;
  box-shadow: none;
  background: none;
  text-shadow: none;
  color: $text-secondary;
}

// Calendar menu side column
.datemenu-calendar-column {
  spacing: $space-size;
  border: none;
  padding: 0 !important;
  margin: 0 !important;
  color: $text-secondary;

  &:hover, &:focus { color: $text; background-color: $secondary-fill; }

  &:active { color: $text; background-color: $track; }

  &:ltr {
    margin-right: $space-size !important;
    margin-left: $space-size + 6px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left-width: 0;
  }

  &:rtl {
    margin-left: $space-size !important;
    margin-right: $space-size + 6px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-right-width: 0;
  }

  .datemenu-displays-box {
    spacing: $space-size;
  }
}

.datemenu-today-button {
  min-height: $menuitem-size * 2 - 4px * 2;
  padding: $space-size;
  border-radius: $material-radius;
  border: none;
  box-shadow: none;
  text-shadow: none;
  background: none;
  color: $text-secondary;

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

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

  &:hover, &:focus {
    color: $text;
    background-color: $secondary-fill;
  }

  &:active {
    color: $text;
    background-color: $track;
  }
}

.calendar-month-label {
  height: $menuitem-size - 4px * 2;
  margin: 2px;
  padding: 6px 16px;
  border-radius: $material-radius;
  color: $text-secondary !important;
  background-color: transparent !important;
  font-weight: bold;
  text-align: center;
  text-shadow: none;

  &:focus {
    color: $text !important;
    background-color: $secondary-fill !important;
  }
}

.pager-button {
  width: $menuitem-size !important;
  height: $menuitem-size !important;
  margin: 2px !important;
  padding: 2px !important;
  border-radius: $circular-radius;
  background-color: transparent;
  color: $text-secondary;

  &:hover, &:focus {
    color: $text;
    background-color: $secondary-fill;
    box-shadow: none !important;
  }

  &:active { color: $text; background-color: $track; }
}

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

.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"); }
}

.calendar-day {
  @include font(caption);
  text-align: center;
  width: if($compact == 'false', 3em, 2.5em) !important;
  height: if($compact == 'false', 3em, 2.5em) !important;
  padding: 0 !important;
  margin: 2px !important;
  border-radius: $circular-radius;
  color: $text-secondary !important;
  border: none !important;
  font-feature-settings: "tnum";
  text-shadow: none;
  background-color: transparent !important;

  &:hover, &:focus {
    color: $text !important;
    background-color: $secondary-fill !important;
    box-shadow: none;
  }

  &:active {
    color: $text !important;
    background-color: $track !important;
    border: none !important; //avoid jumparound due to today
  }

  &:selected {
    color: $text !important;
    background-color: $track !important;
    border: none !important; //avoid jumparound due to today
    box-shadow: none !important;
    outline: none !important;
  }

  &.calendar-weekday {}

  &.calendar-weekend {
    color: $text-disabled;
  }
}

.calendar-day-heading {  //day of week heading
  width: 24px !important;
  height: 24px - $space-size !important;
  margin-top: 2px !important;
  padding: $space-size 0 0 !important;
  border-radius: $circular-radius;
  background-color: transparent !important;
  color: $text-disabled !important;
  @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-work-day { }
.calendar-nonwork-day {
  color: $text;
}

.calendar-today {
  font-weight: bold !important;
  color: on($primary) !important;
  background-color: $primary !important;
  border: none;

  &:hover, &:focus {
    background-color: lighten($primary, 3%) !important;
    color: on($primary) !important;
  }

  &:active, &:selected {
    background-color: $primary !important;
    color: on($primary) !important;

    &:hover, &:focus {
      background-color: lighten($primary, 3%) !important;
      color: on($primary) !important;
    }
  }
}

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

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

.calendar-other-month {
  color: $text-secondary-disabled !important;
  font-weight: normal;

  &.calendar-weekend {
    color: $text-secondary-disabled !important;
  }
}

.calendar-week-number {
  margin: 6px !important;
  padding: 0 $margin-size / 2 + $space-size !important;
  border-radius: $circular-radius;
  background-color: if($variant == 'light', rgba(black, 0.04), rgba(white, 0.03));
  color: $text-disabled;
  font-size: pt(11px);
  font-weight: bold;
  text-align: center;
  text-shadow: none;
  font-feature-settings: "tnum";
}

// buttons under calendar
.world-clocks-button,
.weather-button,
.events-button {
  padding: $space-size $space-size * 2;
  border-radius: $material-radius;
  border: none;
  box-shadow: none;
  text-shadow: none;
  color: $text-secondary;
  background-color: $fill;

  &:hover, &:focus {
    color: $text;
    background-color: $secondary-fill;
  }

  &:active {
    color: $text;
    background-color: $track;
  }
}

.world-clocks-header,
.weather-header,
.message-list-section-title,
.events-section-title,
.events-title {
  color: $text-disabled;
  font-weight: bold;
  margin-bottom: $space-size / 2;
  text-shadow: none;
}

.weather-grid,
.world-clocks-grid {
  spacing-rows: 8px;
  spacing-columns: 16px;
}

.world-clocks-header,
.weather-header,
.events-section-title {
  color: $text-disabled;
  font-weight: bold;
  font-size: if($compact == 'true', 0.9em, 1em);
}

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

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

  .event-time {
    color: $text-secondary-disabled;
    font-feature-settings: "tnum";
  }
}

// World clocks button
.world-clocks-button {
  .world-clocks-city {
    color: $text-disabled;
    font-weight: normal;
    font-size: if($compact == 'true', 0.9em, 1em);
  }

  .world-clocks-time {
    color: $text-disabled;
    font-feature-settings: "tnum";
    font-weight: bold;
    font-size: if($compact == 'true', 0.9em, 1em);

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

  .world-clocks-timezone {
    color: $text-disabled;
    font-feature-settings: "tnum";
    font-size: if($compact == 'true', 0.9em, 1em);
  }
}

// Weather button
.weather-button {
  .weather-box {
    spacing: 12px;
  }

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

  .weather-header.location {
    font-weight: normal;
    color: $text-disabled;
    font-size: if($compact == 'true', 0.8em, 0.9em);
  }

  .weather-forecast-icon {
    icon-size: if($compact == 'true', 24px, 32px);
    color: $text-disabled;
  }

  .weather-forecast-time {
    color: $text-disabled;
    font-size: if($compact == 'true', 0.7em, 0.8em);
    font-feature-settings: "tnum";
    font-weight: normal;
    padding-top: 0.2em;
    padding-bottom: 0.4em;
  }

  .weather-forecast-temp {
    font-weight: bold;
    color: transparentize($text, 0.35);
    text-shadow: none;
  }
}
