/* Date — composant canonique ; son emploi : canon_date.md. */

@layer components {
    .date-source[aria-hidden="true"] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
    }
    .date-calendar {
        display: flex;
        flex-direction: column;
        gap: var(--canon-space-2);
    }
    .date-head {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        align-items: center;
        gap: var(--canon-space-1);
    }
    .date-previous,
    .date-next {
        display: grid;
        place-items: center;
        width: var(--canon-size-icon-target);
        aspect-ratio: 1;
        padding: 0;
    }
    .date-previous::before,
    .date-next::before {
        width: 0.5em;
        aspect-ratio: 1;
        transform: rotate(45deg);
    }
    .date-previous:dir(rtl)::before,
    .date-next:dir(rtl)::before {
        transform: rotate(-45deg);
    }
    .date-grid {
        width: 100%;
        border-collapse: collapse;
    }
    .date-weekday {
        padding-block: var(--canon-space-1);
    }
    .date-day {
        width: 2.5em;
        height: 2.5em;
    }
}

@layer components {
    .date-source[aria-hidden="true"] {
        border: 0;
        clip-path: inset(50%);
    }
    .date-source:focus-visible + .field-action-group > .date-input {
        outline: var(--canon-focus-width) solid var(--canon-theme-focus);
        outline-offset: var(--canon-focus-offset);
    }
    .date-previous,
    .date-next {
        border: 0;
        border-radius: var(--canon-radius-control);
        background-color: transparent;
    }
    .date-previous:hover,
    .date-next:hover {
        background-color: var(--canon-theme-highlight);
    }
    .date-previous:disabled,
    .date-next:disabled {
        background-color: transparent;
    }
    .date-previous::before {
        border-block-end: 2px solid currentColor;
        border-inline-start: 2px solid currentColor;
    }
    .date-next::before {
        border-block-start: 2px solid currentColor;
        border-inline-end: 2px solid currentColor;
    }
    .date-day {
        border-radius: var(--canon-radius-control);
    }
    .date-day:hover {
        background-color: var(--canon-theme-highlight);
    }
    .date-day:focus-visible {
        outline-offset: calc(-1 * var(--canon-focus-width));
    }
    .date-day[aria-selected="true"] {
        background-color: var(--canon-theme-action);
    }
    .date-day[aria-disabled="true"] {
        background-color: transparent;
    }
    @media (forced-colors: active) {
        .date-day[aria-selected="true"] {
            outline: 2px solid currentColor;
            outline-offset: -2px;
        }
    }

    .date-source[aria-hidden="true"] {
        white-space: nowrap;
    }
    .date-previous,
    .date-next {
        color: var(--canon-theme-muted);
    }
    .date-previous:hover,
    .date-next:hover {
        color: var(--canon-theme-ink);
    }
    .date-previous:disabled,
    .date-next:disabled {
        color: var(--canon-theme-faint);
    }
    .date-previous::before,
    .date-next::before {
        content: "";
    }
    .date-weekday {
        font-size: var(--canon-size-note);
        font-weight: var(--canon-weight-label);
        color: var(--canon-theme-muted);
    }
    .date-day {
        text-align: center;
        font-variant-numeric: tabular-nums;
        color: var(--canon-theme-ink);
    }
    .date-day[aria-current="date"] {
        font-weight: var(--canon-weight-label);
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }
    .date-day[aria-selected="true"] {
        color: var(--canon-theme-on-action);
    }
    .date-day[aria-disabled="true"] {
        color: var(--canon-theme-faint);
    }

    .date-source[aria-hidden="true"] {
        pointer-events: none;
    }
    .date-previous,
    .date-next {
        cursor: pointer;
    }
    .date-previous:disabled,
    .date-next:disabled {
        cursor: default;
    }
    .date-day {
        cursor: pointer;
        user-select: none;
    }
    .date-day[aria-disabled="true"] {
        cursor: default;
    }
}