/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */

@use "../../common/resets" as *;

.ams-date-picker {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--ams-date-picker-font-family);
  font-size: var(--ams-date-picker-font-size);
  font-weight: var(--ams-date-picker-font-weight);
  gap: var(--ams-date-picker-gap);
  inline-size: var(--ams-date-picker-inline-size);
  line-height: var(--ams-date-picker-line-height);
  max-inline-size: 100%;
}

.ams-date-picker__header {
  align-items: center;
  display: flex;
}

.ams-date-picker__caption {
  margin-inline: auto;
  text-align: center;
}

.ams-date-picker__body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

// Keep the row element in the accessibility tree; avoid `display: contents` which can be dropped by some AT/browser combinations.
.ams-date-picker__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(7, 1fr);
}

.ams-date-picker__weekday {
  text-align: center;
}

.ams-date-picker__day {
  @include reset-button;

  background-color: transparent;
  color: var(--ams-date-picker-day-color);
  cursor: var(--ams-date-picker-day-cursor);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  inline-size: 100%;
  line-height: inherit;
  outline-offset: var(--ams-date-picker-day-outline-offset);
  text-align: center;

  &:not([aria-disabled="true"]):hover {
    background-color: var(--ams-date-picker-day-hover-background-color);
    color: var(--ams-date-picker-day-hover-color);
  }
}

.ams-date-picker__day--current {
  font-weight: var(--ams-date-picker-day-current-font-weight);
}

.ams-date-picker__cell[aria-selected="true"] .ams-date-picker__day {
  background-color: var(--ams-date-picker-day-selected-background-color);
  color: var(--ams-date-picker-day-selected-color);

  &:hover {
    background-color: var(--ams-date-picker-day-selected-hover-background-color);
  }

  @media (forced-colors: active) {
    &,
    & *,
    &:hover {
      background-color: Highlight;
      color: HighlightText;
    }
  }
}

.ams-date-picker__day[aria-disabled="true"] {
  color: var(--ams-date-picker-day-disabled-color);
  cursor: var(--ams-date-picker-day-disabled-cursor);
  text-decoration-line: var(--ams-date-picker-day-disabled-text-decoration-line);
}