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

.root {
    :global(.uui-calendar-days) > div:last-child {
        :global(.uui-calendar-day-cell):last-child > :global(.uui-range-datepicker-in-range) {
            &:not(:global(.uui-range-datepicker-first-day-in-range-wrapper)) {
                &:not(:global(.uui-range-datepicker-last-day-in-range-wrapper)) {
                    position: relative;

                    :global(.uui-calendar-day) {
                        top: -3px;
                    }

                    &::after {
                        background: linear-gradient(320deg, var(--uui-surface) 3px, transparent 0), linear-gradient(-135deg, var(--uui-surface) 3px, transparent 0);
                        background-position: left-bottom;
                        background-repeat: repeat-y;
                        background-size: 6px 6px;
                        content: ' ';
                        display: block;
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        width: 6px;
                        height: 100%;
                    }
                }
            }
        }
    }

    :global(.uui-calendar-days) > div:first-child {
        :global(.uui-calendar-day-cell):empty + :global(.uui-calendar-day-cell) :global(.uui-range-datepicker-in-range),
        :global(.uui-calendar-day-cell):first-child :global(.uui-range-datepicker-in-range) {
            &:not(:global(.uui-range-datepicker-first-day-in-range-wrapper)) {
                &:not(:global(.uui-range-datepicker-last-day-in-range-wrapper)) {
                    position: relative;

                    :global(.uui-calendar-day) {
                        top: -3px;
                    }

                    &::after {
                        background: linear-gradient(45deg, var(--uui-surface) 3px, transparent 0), linear-gradient(135deg, var(--uui-surface) 3px, transparent 0);
                        background-position: left-bottom;
                        background-repeat: repeat-y;
                        background-size: 6px 6px;
                        content: ' ';
                        display: block;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 6px;
                        height: 100%;
                    }
                }
            }
        }
    }

    :global(.uui-range-datepicker-in-range) {
        &:global(.uui-calendar-day-wrapper) {
            background-color: var(--uui-rdtp-bg-selected-date);
            border-radius: 0;
            width: 40px;
        }
    }

    :global(.uui-range-datepicker-first-day-in-range-wrapper) {
        &:global(.uui-calendar-selected-day) {
            border-top-left-radius: 50%;
            border-bottom-left-radius: 50%;
        }
    }

    :global(.uui-range-datepicker-last-day-in-range-wrapper) {
        &:global(.uui-calendar-selected-day) {
            border-top-right-radius: 50%;
            border-bottom-right-radius: 50%;
            margin-right: 10px;
        }
    }

    :global(.uui-range-datepicker-separator) {
        display: flex;
        flex: 0 0 auto;
        border-left: 1px solid var(--uui-control-border);
    }
}

.container {
    &.day-selection {
        .from-picker {
            :global(.uui-datepickerheader-nav-icon-right) {
                visibility: hidden;
            }
        }

        .to-picker {
            :global(.uui-datepickerheader-nav-icon-left) {
                visibility: hidden;
            }
        }
    }

    .bodes-wrapper {
        position: relative;
        transition: height 0.3s ease-in-out;
    }

    .blocker {
        background-color: rgba(255, 255, 255, 0.9);
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
}

:global(.uui-datepicker-container) {
    transition: height 0.3s ease-in-out;
}


