@use "../../core/jkl";

@layer jokul.components {
    .jkl-calendar {
        --jkl-calendar-padding: var(--jkl-unit-15) var(--jkl-unit-20) var(--jkl-unit-20);
        --jkl-calendar-gap: var(--jkl-unit-15);

        // Custom tweaks for iPhone SE
        @include jkl.screen-to(375px) {
            --jkl-calendar-padding: var(--jkl-unit-05) var(--jkl-unit-10) var(--jkl-unit-20);
        }

        display: block;
        background-color: var(--jkl-color-background-container-high);
        color: var(--jkl-color);

        &__padding {
            display: flex;
            flex-direction: column;
            gap: var(--jkl-calendar-gap);
            box-sizing: border-box;

            @include jkl.forced-colors-mode {
                border: 1px solid CanvasText;
            }
        }
    }
}