$color-empty: #f5f5f5;
$color-weekend: #ddd;

// Seven days plus the week number column. The width of the calendar is derived from
// the cell size so the two can never drift apart.
$calendar-columns: 8;
$calendar-cell-size: 2.625rem;

.calendar {
  background-color: color("background");
  width: $calendar-cell-size * $calendar-columns;

  &__days {
    margin-bottom: spacing(-2);

    // One grid per week. The rows carry the grid roles for screen readers, and laying
    // the columns out per row rather than on the container means the row generates a
    // box - which is what makes :hover and :focus-within below work on a whole week.
    &__row {
      display: grid;
      grid-template-columns: repeat($calendar-columns, $calendar-cell-size);
    }

    &__week-number {
      display: flex;
      align-items: center;
      justify-content: center;
      width: $calendar-cell-size;
      height: $calendar-cell-size;
      color: color("foreground");
      background-color: color("background-secondary");
      border: none;
      @include set-font(0, "single", $weight: "bold");

      // Excludes --header - "Uge" is a heading, not a hoverable/selectable cell.
      // Excludes --marked - it's already selected, so its own hover shouldn't change it.
      &:hover:not([disabled]):not(.calendar__days__week-number--header):not(.calendar__days__week-number--marked) {
        background-color: color("interactive-hover");
      }

      &:focus-visible {
        outline: $outline-width solid color("utility-focus");
        outline-offset: -$width-border;
      }

      &[disabled] {
        color: color("background");
        background-color: color("foreground-disabled");
      }

      &--header {
        background-color: transparent;
      }

      // Left cap of the band that marks a whole week
      &--marked {
        box-shadow:
          inset 0 $width-border 0 0 color("theme"),
          inset 0 (-$width-border) 0 0 color("theme"),
          inset $width-border 0 0 0 color("theme");

        &, &:hover:not([disabled]) {
          color: color("background");
          background-color: color("theme");
        }

        &:hover:not([disabled]) {
          background-color: color("theme-hover");
        }
      }
    }

    // When the calendar selects whole weeks, hovering any cell in a row previews it as
    // a grey band. Keyboard focus gets its own blue outline around the row instead, so
    // it stays visually distinct from the hover/selected states. The header row (day
    // names, "Uge") is excluded via --header - it's a heading, not a selectable week.
    &--week-selection &__row {
      &:hover {
        .calendar__days__week-number:not(.calendar__days__week-number--marked):not(.calendar__days__week-number--header) {
          background-color: color("background-secondary");
        }

        .calendar__days__date:not(.calendar__days__date--week-marked) {
          background-color: color("background-secondary");
        }
      }

      &:focus-within {
        outline: $outline-width solid color("utility-focus");
        outline-offset: -$width-border;
      }

      // Suppressed for a row that's already the selected week - the theme-colored
      // band already shows it's selected, so it doesn't need a focus outline too.
      $selector-string: "selector(:has(.calendar__days__week-number--marked))";

      @supports (#{$selector-string}) {
        &:focus-within {
          outline: none;
        }

        &:not(:has(.calendar__days__week-number--marked)):focus-within {
          outline: $outline-width solid color("utility-focus");
          outline-offset: -$width-border;
        }
      }
    }

    &__day, &__date {
      width: $calendar-cell-size;
      height: $calendar-cell-size;
      text-align: center;
      @include set-font(0, "single", $transform: "uppercase");
    }

    &__day {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: spacing(-3);
    }

    &__date {
      display: flex;
      align-items: center;
      justify-content: center;
      color: color("foreground");
      background-color: color("background");
      border: none;

      // Excludes --week-marked - it's already part of the selected week, so its own
      // hover shouldn't change it.
      &:hover:not([disabled]):not(.calendar__days__date--week-marked) {
        background-color: color("interactive-hover");
      }

      &:focus-visible {
        outline: $outline-width solid color("utility-focus");
        outline-offset: -$width-border;
      }

      &[disabled] {
        background-color: color("foreground-disabled");
        color: color("background");
      }

      &--weekend {
        background-color: color("theme-secondary");

        &[disabled] {
          color: color("foreground-secondary");
        }
      }

      &--empty {
        background-color: color("background-secondary");
        &[disabled] {
          color: color("interactive");
        }
      }

      // Band across the seven days of a week marked by clicking a date or its week number.
      // Solid-filled like the week number cell, so it reads as one continuous selected band.
      &--week-marked {
        background-color: color("theme");
        color: color("background");
      }

      &--selected {
        background-color: color("theme");
        color: color("background");
      }
    }
  }

  &__year-month, &__time {
    display: flex;
    align-items: baseline;
    margin-bottom: spacing(-3);

    .form__field {
      margin-right: spacing(-3);
      margin-bottom: 0;
    }

    .button {
      margin-left: auto;
    }
  }
}