
calendar {
  padding: $popup-scale * 1.75pt $popup-scale * 1pt;
  font-size: $popup-scale * 8pt;

  header {
    padding: $popup-scale * 2pt 0;
    @include color-body;
  }

  :selected      { @include color-accent; }
  .highlight     { @include color-accent; font-weight: bold; }
  :indeterminate { color: $base03; }
}

.cal-box .sys-section-header { margin-bottom: $popup-scale * 4pt; }


.hour, .month {
  font-weight: bolder;
}

.minute, .month {
  margin-top: $popup-scale * -4pt;
}


.date {
  @include color-accent;
  @include background-base;
  @include border-radius;
}

.datetime {
  padding: $gaps-window;
}

// Clock window accents
.weather-accent { background-color: $base0A; }
.cal-accent     { background-color: $base0B; }
.bri-accent     { background-color: $base09; }
.vol-accent     { background-color: $base0D; }
.quick-accent   { background-color: $base0E; }

// Quick actions
.quick-grid { margin-top: $popup-scale * 2pt; }

.quick-btn {
  @include background-base2;
  @include border-radius;
  padding: $popup-scale * 8pt $popup-scale * 4pt;
  margin: $popup-scale * 4px;
  min-width: 0;
  min-height: 0;
  border: none;

  &:hover {
    @include background-active;
    .quick-icon, .quick-label {color: $base01;}
  }
}

.quick-btn-active {
  .quick-icon  { color: $base0E; }
  .quick-label { color: $base0E; }
}

.quick-icon  { font-size: 1.5em; @include color-body; }
.quick-label { font-size: 0.68em; margin-top: $popup-scale * 3pt; @include color-body; }

// Weather section
.weather-main  { margin-bottom: $popup-scale * 8pt; }
.weather-icon  { font-size: 2.2em; margin-right: $popup-scale * 12pt; @include color-accent; }
.weather-temp  { font-size: 1.3em; font-weight: bold; @include color-base; }
.weather-desc  { font-size: 0.78em; @include color-body; }
.weather-stats { margin-top: $popup-scale * 4pt; }

// Volume section
.ctrl-row   { margin-bottom: $popup-scale * 4pt; }
.ctrl-icon        { font-size: 1.1em; min-width: $popup-scale * 22pt; @include border-radius; @include color-body; }
.ctrl-icon:hover  { @include background-active; }
.ctrl-muted       { @include color-inactive; }
.ctrl-value { font-size: 0.72em; min-width: $popup-scale * 28pt; @include color-active; }

scale.ctrl-slider.ctrl-slider-muted {
  trough {
    highlight { background-color: $base03; }
    slider    { background-color: $base03; }
  }
}

scale.ctrl-slider {
  padding: $popup-scale * 2pt $popup-scale * 4pt;
  trough {
    @include border-radius;
    @include background-base2;
    min-height: 5px;
    highlight { background-color: $base0C; @include border-radius; }
  }
  slider {
    background-color: $base07;
    min-height: 11px;
    min-width: 11px;
    @include border-radius;
    margin: -3px;
    border: none;
  }
}
