@use "sass:list";
@use "sass:map";
@use "./calendar.config" as config;
@use "../../01-core/external" as *;
@use "../../01-core/prefix" as *;

$_c: config.$ss-calendar-config;

/// Month grid as a semantic `<table>`: `<caption>` month, weekday `<th
/// scope="col">`, one `<td>` per day. Today carries `aria-current="date"`
/// on its `__date`; the module draws, the app supplies the dates.
@mixin ss-calendar {
    inline-size: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--ss-font-size-sm);
    color: var(--ss-color-text);

    th {
        padding: q(6) q(4);
        font-size: var(--ss-font-size-xs);
        font-weight: 600;
        text-align: center;
        text-transform: uppercase;
        color: var(--ss-color-text-muted);
    }
}

@mixin ss-calendar-caption {
    padding-block-end: q(8);
    font-size: var(--ss-font-size-lg);
    font-weight: 600;
    text-align: start;
}

@mixin ss-calendar-day {
    block-size: map.get($_c, cell-height);
    padding: map.get($_c, cell-padding);
    vertical-align: top;
    border: map.get($_c, border);
}

@mixin ss-calendar-day-outside {
    background-color: map.get($_c, outside-bg);

    .#{$ss-prefix-module}-calendar__date {
        color: var(--ss-color-text-muted);
    }
}

@mixin ss-calendar-day-weekend {
    background-color: var(--ss-color-surface-muted);
}

@mixin ss-calendar-day-selected {
    box-shadow: inset 0 0 0 q(2) var(--ss-color-accent);
}

@mixin ss-calendar-date {
    display: inline-grid;
    place-items: center;
    min-inline-size: map.get($_c, date-size);
    block-size: map.get($_c, date-size);
    padding-inline: q(4);
    font-variant-numeric: tabular-nums;
    border-radius: var(--ss-radius-full);

    &[aria-current="date"] {
        font-weight: 600;
        color: var(--ss-color-on-accent);
        background-color: var(--ss-color-accent);
    }
}

/// Button-wrapped dates for pickers and selectable cells.
@mixin ss-calendar-date-button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;

    &:hover {
        background-color: var(--ss-color-surface-hover);
    }

    &:focus-visible {
        outline: var(--ss-focus-ring-width, #{q(2)}) solid
            var(--ss-focus-ring-color, currentColor);
        outline-offset: var(--ss-focus-ring-offset, #{q(2)});
    }

    &[aria-pressed="true"] {
        color: var(--ss-color-highlight-foreground);
        background-color: var(--ss-color-highlight);
        box-shadow: inset 0 0 0 q(1) var(--ss-color-accent);
    }
}

@mixin ss-calendar-events {
    display: grid;
    gap: q(2);
    margin: q(2) 0 0;
    padding: 0;
    list-style: none;
}

@mixin ss-calendar-event {
    overflow: hidden;
    padding: 0 q(4);
    font-size: var(--ss-font-size-xs);
    line-height: 1.6;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ss-calendar-event-fg, var(--ss-color-highlight-foreground));
    background-color: var(--ss-calendar-event-bg, var(--ss-color-highlight));
    border-inline-start: q(2) solid currentColor;
    border-radius: var(--ss-radius-xs, 0);
}

@mixin ss-calendar-event-tone($tone) {
    $pair: map.get(map.get($_c, tones), $tone);
    --ss-calendar-event-bg: #{list.nth($pair, 1)};
    --ss-calendar-event-fg: #{list.nth($pair, 2)};
}

/// Date-picker density: square cells, centred dates, no event lists.
@mixin ss-calendar-compact {
    inline-size: auto;

    .#{$ss-prefix-module}-calendar__day {
        inline-size: map.get($_c, compact-cell);
        block-size: map.get($_c, compact-cell);
        padding: q(2);
        text-align: center;
        vertical-align: middle;
        border: 0;
    }

    .#{$ss-prefix-module}-calendar__day--outside {
        background: none;
    }
}