@use "variables" as *;
@use "../../components/button/button";
@use "../../core";
@use "../../core/size";

$calendar-icon-padding: 5px;
$calendar-icon-disabled-border-width: 1px;
$calendar-icon-forced-colors-border-width: 2px;
$calendar-icon-disabled-padding: calc($calendar-icon-padding - $calendar-icon-disabled-border-width);
$calendar-icon-disabled-forced-colors-padding: calc($calendar-icon-padding - $calendar-icon-forced-colors-border-width);
$calendar-icon-forced-colors-padding: calc($calendar-icon-padding - $calendar-icon-forced-colors-border-width);

%calendar-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.calendar-navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    border-bottom: var(--f-border-width-medium) solid $calendarnavbar-color-border;
    color: $calendarnavbar-color-text;
    padding: 1rem;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: var(--f-font-size-h3);

    &__month {
        margin-right: auto;

        &--title {
            @extend %calendar-title;
        }
    }

    &__arrow--previous {
        transform: scaleX(-1);
    }

    &__arrow--up {
        transform: rotate(0.5turn);
    }

    &__year-selector-button {
        /* stylelint-disable scss/at-extend-no-missing-placeholder -- technical debt */
        @extend .button--margin-bottom-0;
        @extend .button--tertiary--muted;
        @extend .button--tertiary;
        @extend .button;

        /* stylelint-enable */
        display: flex;
        gap: 0.5rem;
        align-items: center;
        font-size: 14px;
        line-height: 1.25rem;
        min-width: 24px;
        padding: core.densify(0.375rem) size.$padding-025;
        text-underline-offset: 3.5px;

        &--title {
            @extend %calendar-title;
        }
    }

    &__icon {
        color: $calendarnavbar-f-icon-arrow-color-content;
        background-color: $calendarnavbar-button-color-background;
        width: var(--f-icon-size-large);
        height: var(--f-icon-size-large);
        padding: $calendar-icon-padding;
        border-radius: 50%;
        box-shadow: var(--f-button-shadow);

        @media (forced-colors: active) {
            background-color: transparent;
            border: $calendar-icon-forced-colors-border-width solid ButtonBorder;
            color: ButtonText;
            padding: $calendar-icon-forced-colors-padding;
        }

        &--disabled {
            color: $calendarnavbar-f-icon-arrow-color-content-disabled;
            background-color: $calendarnavbar-button-color-background-disabled;
            padding: $calendar-icon-disabled-padding;
            border: $calendar-icon-disabled-border-width solid $calendarnavbar-button-color-border-disabled;
            box-shadow: none;

            @media (forced-colors: active) {
                background-color: transparent;
                border-color: GrayText;
                border-width: $calendar-icon-forced-colors-border-width;
                color: GrayText;
                padding: $calendar-icon-disabled-forced-colors-padding;
            }
        }
    }

    &__arrow {
        padding: 0;
        display: flex;
        border: none;
        background-color: transparent;
        flex-shrink: 0;
        cursor: pointer;

        @media (forced-colors: active) {
            border-color: ButtonBorder;
        }
    }
}