// We use a single ID'd component for all calendar date pickers and move it
// around to where it is needed.
// sass-lint:disable no-ids
// This is the calendar container.
// sass-lint:disable no-ids
#wc_calbox {
  @include border;
  background-color: $wc-clr-global-bg;
}

// The calendar table
#wc_calendar {
  thead {
    @include border($pos: bottom);
  }

  th {
    background-color: $wc-clr-highlight-bg;
    color: $wc-clr-highlight-fg;
  }
}

#wc_caldaybox td {
  color: $wc-clr-disabled-fg;
}
// sass-lint:enable no-ids

// date picker buttons
.wc_wdf_pick {
  color: $wc-clr-global-fg;

  &[aria-pressed='true'] { // selected date
    background-color: $wc-clr-selected-bg;
    color: $wc-clr-selected-fg;
  }
}

.wc_wdf_today { // today
  @include outline;
}
