/* The calendar on every date field (date_input, the date-field controller, vanillajs-datepicker):
/* its own layout, in Runwell's tokens, so schemes, corners, dark mode and themes reach it. */
@layer components {
  /* The two fields date_input renders: the hidden one has no box; the one people see opens it. */
  .date-picker {
    display: contents;

    input[readonly][data-date-field-target="display"] {
      cursor: pointer;
    }
  }

  /* A calendar in a dialog lives inside it (the top layer): the dialog lets it hang out while open. */
  dialog:has(.datepicker.active) {
    overflow: visible;
  }

  .datepicker {
    inline-size: min-content;

    &:not(.active) {
      display: none;
    }
  }

  .datepicker-dropdown {
    padding-block-start: 0.35rem;
    position: absolute;
    z-index: 30;

    &.datepicker-orient-top {
      padding-block: 0 0.35rem;
    }
  }

  .datepicker-picker {
    background-color: var(--color-canvas);
    border: 1px solid var(--color-ink-lighter);
    border-radius: calc(0.75rem * var(--radius-scale, 1));
    box-shadow: var(--shadow);
    color: var(--color-ink);
    display: flex;
    flex-direction: column;
    font-size: var(--text-small);
    padding: 0.5rem;
  }

  .datepicker-controls {
    align-items: center;
    display: flex;
    gap: 0.25rem;

    .button {
      align-items: center;
      background: none;
      border: 0;
      border-radius: var(--radius-control);
      color: var(--color-ink);
      cursor: pointer;
      display: inline-flex;
      font: inherit;
      justify-content: center;
      min-block-size: 2rem;
      padding: 0 0.6rem;

      &:hover { background-color: var(--color-ink-lightest); }
      &:focus-visible { outline: 2px solid var(--color-link); outline-offset: 1px; }
      &[disabled] { cursor: not-allowed; opacity: 0.4; }
    }

    .view-switch {
      flex: auto;
      font-weight: 650;
    }

    .prev-button,
    .next-button {
      color: var(--color-ink-medium);
      flex: 0 0 2rem;
      font-size: 1.25rem;
      line-height: 1;
      padding: 0;

      &.disabled { visibility: hidden; }
    }
  }

  .datepicker-header .datepicker-controls {
    padding-block-end: 0.25rem;
  }

  .datepicker-footer {
    border-block-start: 1px solid var(--color-ink-lighter);
    margin-block-start: 0.4rem;
    padding-block-start: 0.4rem;

    .datepicker-controls {
      gap: 0.4rem;
    }

    .datepicker-controls > * {
      flex: 1;
    }

    .datepicker-controls .button {
      background-color: var(--color-ink-lightest);
      flex: 1;
      font-size: var(--text-x-small);
      font-weight: 600;
      min-block-size: 1.9rem;

      &:hover { background-color: var(--color-ink-lighter); }
    }
  }

  .datepicker-main {
    flex: auto;
  }

  .datepicker-view,
  .datepicker-grid {
    display: flex;
  }

  .datepicker-view {
    align-items: stretch;
    inline-size: 16.5rem;
  }

  .datepicker-grid {
    flex: auto;
    flex-wrap: wrap;
    gap: 2px 0;
  }

  .datepicker .days {
    display: flex;
    flex: auto;
    flex-direction: column;
  }

  .datepicker .days-of-week {
    display: flex;
  }

  .datepicker span {
    align-items: center;
    border-radius: var(--radius-control);
    cursor: default;
    display: flex;
    justify-content: center;
    user-select: none;
  }

  .datepicker .dow {
    block-size: 1.75rem;
    color: var(--color-ink-medium);
    flex-basis: calc(100% / 7);
    font-size: var(--text-x-small);
    font-weight: 600;
  }

  .datepicker-cell {
    block-size: 2.25rem;
    flex-basis: calc(100% / 7);
    font-variant-numeric: tabular-nums;

    &:not(.day) {
      block-size: 3.5rem;
      flex-basis: 25%;
    }

    &:not(.disabled):hover {
      background-color: var(--color-ink-lightest);
      cursor: pointer;
    }

    &.prev:not(.disabled),
    &.next:not(.disabled) {
      color: var(--color-ink-light);
    }

    &.disabled {
      color: var(--color-ink-lighter);
    }

    &.today:not(.selected) {
      box-shadow: inset 0 0 0 1px var(--color-link);
      color: var(--color-link);
      font-weight: 650;
    }

    &.focused:not(.selected) {
      background-color: var(--color-selected-light);
    }

    &.selected,
    &.selected:hover {
      background-color: var(--color-link);
      color: var(--color-canvas);
      font-weight: 650;
    }
  }
}