@use "../../core/mixins/circle";
@use "variables" as *;
@use "../../core/mixins/forcedcolors";

$calendar-highlight-border: var(--f-border-width-small) solid $calendarday-highlight-color-border-default;

.calendar-day {
    align-items: center;
    display: inline-flex;
    font-weight: var(--f-font-weight-medium);
    justify-content: center;
    height: 2.75rem;
    width: 100%;
    color: $calendarday-color-text-default;

    // Highlight = mark today's date
    &--highlight {
        position: relative;

        &::before {
            @include circle.circle($border: $calendar-highlight-border, $size: 2rem);

            content: "";
            position: absolute;
            border: var(--f-border-width-small) solid $calendarday-highlight-color-border-default;
        }

        &.calendar-day--selected {
            &::before {
                border: var(--f-border-width-medium) solid $calendarday-highlight-color-border-selected;

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

        &:active:not(&--disabled) {
            &::before {
                border: var(--f-border-width-medium) solid $calendarday-highlight-color-border-selected;

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

        &.calendar-day--disabled {
            position: relative;

            &::before {
                @include circle.circle($border: $calendar-highlight-border, $size: 2rem);

                content: "";
                position: absolute;
                border: var(--f-border-width-small) solid $calendarday-highlight-color-border-default;
            }

            &::after {
                content: "";
                z-index: 1;
                position: absolute;
                border-top: var(--f-border-width-medium) solid;
                width: 60%;
            }
        }
    }

    &--selected {
        color: $calendarday-color-text-selected;
        background-color: $calendarday-color-background-selected;

        @include forcedcolors.selected-indicator;
    }

    &--disabled {
        position: relative;

        &::before {
            content: "";
            position: absolute;
            border-top: var(--f-border-width-medium) solid;
            width: 60%;
        }
    }

    @media (hover: hover) {
        &:hover:not(&--disabled, &--selected),
        &--hover:not(&--disabled, &--selected) {
            background-color: $calendarday-color-background-hover;
            color: $calendarday-color-text-hover;

            @include forcedcolors.hover-indicator(border, 2px);
        }
    }

    &:active:not(&--disabled),
    &--active:not(&--disabled) {
        color: $calendarday-color-text-selected;
        background-color: $calendarday-color-background-selected;

        @include forcedcolors.selected-indicator;
    }
}