@use  '../../assets/styles/index' as *;

.root {
    :global(.uui-calendar-content) {
        font-family: var(--uui-calendar-content-font);
        font-weight: var(--uui-calendar-content-font-weight, normal);
    }

    :global(.uui-calendar-weekday) {
        font-family: var(--uui-calendar-weekday-font);
        font-weight: var(--uui-calendar-weekday-font-weight, normal);
        color: var(--uui-calendar-weekends-weekdates);
        width: 34px;
        font-size: 12px;
        line-height: 24px;
        text-align: center;
    }

    :global(.uui-calendar-day-cell) {
        color: var(--uui-calendar-text);
        text-align: center;
        padding: 0;
        height: 36px;
        width: 36px;
        display: flex;
        position: relative;

        &:focus {
            outline: none;
        }
    }

    :global(.uui-calendar-day-wrapper) {
        height: 30px;
        width: 30px;
        font-size: 14px;
        line-height: 30px;
        margin: auto;
        cursor: default;
    }

    :global(.uui-calendar-day) {
        border-radius: 50%;
        height: 36px;
        width: 36px;
        position: absolute;
        left: 0;
        top: 0;
        line-height: 34px;
        border: 1px solid transparent;
        box-sizing: border-box;
    }

    :global(.uui-calendar-clickable-day) {
        &:hover {
            &:not(:global(.uui-calendar-filtered-day)) {
                cursor: pointer;

                :global(.uui-calendar-day) {
                    border: 1px solid var(--uui-calendar-start-end-selected);
                    background-color: var(--uui-calendar-selected-hover);
                    z-index: 1;
                }

                &:global(.uui-calendar-selected-day) {
                    :global(.uui-calendar-day) {
                        border: 1px solid var(--uui-calendar-start-end-selected-hover);
                        background-color: var(--uui-calendar-start-end-selected-hover);
                    }
                }
            }
        }
    }

    :global(.uui-calendar-current-day) {
        &:global(.uui-calendar-day-wrapper) {
            color: var(--uui-calendar-start-end-selected);
            font-family: var(--uui-calendar-selected_day-font);
            font-weight: var(--uui-calendar-selected_day-font-weight, normal);

            :global(.uui-calendar-day)::after {
                position: absolute;
                content: '';
                height: 4px;
                width: 4px;
                border-radius: 50%;
                background-color: var(--uui-calendar-start-end-selected);
                bottom: 3px;
                left: calc(50% - 2px);
            }
        }
    }

    :global(.uui-calendar-selected-day) {
        &:global(.uui-calendar-day-wrapper) {
            :global(.uui-calendar-day) {
                background-color: var(--uui-calendar-start-end-selected);
                color: var(--uui-calendar-selected-hover);

                &::after {
                    background-color: var(--uui-calendar-selected-hover);
                }
            }
        }

        &:global(.uui-calendar-clickable-day) {
            &:hover {
                cursor: pointer;
            }
        }
    }

    :global(.uui-calendar-day-holiday) {
        color: var(--uui-calendar-weekends-weekdates);
    }

    :global(.uui-calendar-filtered-day) {
        &:global(.uui-calendar-day-wrapper) {
            color: var(--uui-calendar-text-filtered);

            &:hover {
                cursor: default;
                background-color: transparent;
            }
        }
    }
}
