@use "../../components/listbox/listbox";

.calendar {
    &__wrapper {
        width: 100%;
    }

    &__year-selector {
        height: var(--f-calendar-height);
        overflow-x: auto;
        position: relative;

        &__listbox {
            @include listbox.list;
        }

        &__year {
            @include listbox.option;

            margin: 5px;

            @media (hover: hover) {
                &.is-hover,
                &:hover:not(&--highlight) {
                    @include listbox.option-hover;
                }
            }

            &--highlight {
                @include listbox.option-selected;
            }
        }
    }
}