@import (reference) '@sb1/ffe-core/less/typography';

.ffe-calendar {
    border: var(--ffe-g-border-width) solid
        var(--ffe-color-border-primary-default);
    border-radius: var(--ffe-g-border-radius);
    background: var(--ffe-color-component-form-input-fill-default);
    color: var(--ffe-color-foreground-default);
    overflow-y: auto;

    &--datepicker {
        position: absolute;
        transform: translateY(var(--ffe-spacing-xs));
        left: 0;
        z-index: 9999;
        width: fit-content;

        &--above {
            top: inherit;
            bottom: 56px;
            min-height: 339px;
        }
    }

    &__header {
        text-align: center;
        color: var(--ffe-color-foreground-emphasis);
        padding: var(--ffe-spacing-sm);
        width: 100%;
        margin-bottom: var(--ffe-spacing-xs);
    }

    &__header-inner-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    &__month,
    &__year,
    &__title {
        padding-right: var(--ffe-spacing-xs);
        color: var(--ffe-color-foreground-emphasis);
        font-family: var(--ffe-g-font-heading-small);
        font-size: var(--ffe-fontsize-h5);
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 0;
    }

    &__month-nav {
        border: none;
        background: transparent;
        cursor: pointer;
        outline: none;
        border-radius: 4px;
        display: grid;
        place-items: center;
        padding: 4px;

        &:focus-visible {
            outline: var(--ffe-g-outline-width) solid
                var(--ffe-color-border-interactive-focus);
            outline-offset: var(--ffe-g-outline-offset);
        }
    }

    &__icon-prev.ffe-icons,
    &__icon-next.ffe-icons {
        color: var(--ffe-color-foreground-emphasis);
    }

    &__icon-next {
        transform: rotate(180deg);
    }

    &__accessible-text {
        position: absolute !important;
        clip: rect(1px, 1px, 1px, 1px);
    }

    &__grid {
        width: 100%;
        border-spacing: 0.5em 0;
        padding: 12px;

        &:focus {
            outline: none;
        }
    }

    &__weekday {
        .ffe-small-text();

        color: var(--ffe-color-foreground-subtle);
    }

    &__weekdays {
        margin-bottom: var(--ffe-spacing-2xs);
    }

    thead {
        display: block;
        border-bottom: var(--ffe-g-border-width) solid
            var(--ffe-color-border-primary-default);
        margin-bottom: var(--ffe-spacing-2xs);
        padding-bottom: var(--ffe-spacing-sm);
    }

    tr {
        display: flex;
        justify-content: space-between;
    }

    td,
    th {
        flex: 1;
        text-align: center;
    }

    &__day {
        padding: var(--ffe-spacing-2xs);
        text-align: center;
        outline: none;
        border-radius: var(--ffe-g-border-radius-sm);
    }

    &__date {
        .ffe-small-text();

        font-size: 1rem;
        width: 2.1875rem;
        aspect-ratio: 1;
        color: var(--ffe-color-foreground-default);
        border: var(--ffe-g-border-width) solid transparent;
        border-radius: var(--ffe-g-border-radius-sm);
        display: inline-block;
        line-height: 2.1875;
        cursor: pointer;

        &--today {
            border: var(--ffe-g-border-width) solid
                var(--ffe-color-border-primary-emphasis);
        }

        @media (hover: hover) and (pointer: fine) {
            &:hover {
                background: var(
                    --ffe-color-component-form-input-fill-default-hover
                );
                color: var(--ffe-color-foreground-default);
            }
        }

        &:active {
            background: var(
                --ffe-color-component-form-input-fill-default-pressed
            );
            color: var(--ffe-color-component-form-input-foreground-default);
        }

        &:focus-visible,
        &--focus {
            outline: var(--ffe-g-outline-width) solid
                var(--ffe-color-border-interactive-focus);
            outline-offset: var(--ffe-g-outline-offset);
            background-color: var(
                --ffe-color-component-form-input-fill-default-hover
            );
        }

        &--selected {
            background: var(--ffe-color-fill-primary-selected-default);
            color: var(--ffe-color-foreground-inverse);

            @media (hover: hover) and (pointer: fine) {
                &:hover {
                    background: var(--ffe-color-fill-primary-selected-hover);
                    color: var(--ffe-color-foreground-inverse);
                }
            }
        }

        &--disabled {
            color: var(--ffe-color-component-form-input-foreground-disabled);

            &.ffe-calendar__date--selected {
                background: var(--ffe-color-component-form-input-fill-disabled);
                color: var(--ffe-color-foreground-subtle);
            }

            @media (hover: hover) and (pointer: fine) {
                &:hover {
                    background: none;
                    color: var(
                        --ffe-color-component-form-input-foreground-disabled
                    );

                    cursor: not-allowed;
                }
            }
        }
    }
}