/* stylelint-disable selector-type-no-unknown, selector-class-pattern, no-descending-specificity */
.date-picker {
    --datepicker-trigger-size-base: 44px;
    --datepicker-width-base: 260px;
    --datepicker-color-disabled: var(--color-bg-base-1);
    font-family: var(--font-family-primary);
    position: relative;

    &__trigger {
        position: relative;
        min-width: 200px;
        width: 100%;
        align-items: center;
        background: none;
        display: flex;
        justify-content: space-between;
        height: var(--datepicker-trigger-size-base);
        border: 1px solid var(--color-border-basic);
        border-radius: 4px;
        padding: 12px;

        &_range {
            width: var(--datepicker-width-base);
        }

        @media (hover: hover) and (pointer: fine) {

            &:hover {
                cursor: pointer;
            }
        }

        &:disabled {
            pointer-events: none;
            cursor: default;
            background-color: var(--datepicker-color-disabled);
        }
    }

    &__popover-content {
        width: 100%;
    }

    &__field-icon {
        fill: var(--color-icon-secondary);
    }

    &__period-calendar-inputs {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    &__wrap-calendar {
        --date-picker-mobile-header-size: 74px;
        --date-picker-date-switch-control-size: 24px;
        --date-picker-date-switch-control-svg-size: 16px;
        --date-picker-date-item-size: 38px;
        --date-picker-date-item-before-size: 39px;
        --date-picker-date-item-font-size: 13px;
        --date-picker-mobile-z-index: 1;
        display: flex;
        border-radius: 4px;
        box-shadow: 0 20px 20px 4px rgba(0, 0, 0, 0.1);
        z-index: var(--date-picker-mobile-z-index);

        &_date-range {
            height: 460px;
        }

        &_is-mobile {
            --date-picker-mobile-z-index: 10;
            --date-picker-date-item-size: 47px;
            --date-picker-date-item-before-size: 48px;
            height: 100vh;
            position: fixed;
            inset: 0;
            display: grid;
            width: 100%;
            background-color: var(--color-bg-base);

            ^^&__period-calendar {
                z-index: 1;
                width: 100%;
            }

            ^^&__period-calendar-inputs {
                flex-wrap: nowrap;
            }

            ^^&__calendar {
                height: 100%;
                overflow: hidden;
                padding: 0;
                display: grid;
            }

            ^^&__calendar-body {
                padding: 12px 22px;
                box-sizing: border-box;
                margin-right: 0;
            }

            ^^&__month-row {
                display: grid;
                grid-template-columns: var(--date-picker-mobile-header-size) 1fr var(--date-picker-mobile-header-size);
                background-color: var(--color-bg-base);
                height: var(--date-picker-mobile-header-size);
                justify-content: center;
                justify-items: center;
                gap: 0;
                z-index: 10;
                box-shadow: 0 0 6px 0 var(--color-border-basic);
            }

            ^^&__row-center {
                font-size: var(--date-picker-date-item-font-size);
            }

            ^^&__row-right,
            ^^&__row-left {
                width: auto;
                padding: 0 16px;
                height: 100%;
            }
        }
    }

    &__calendar {
        background-color: var(--color-bg-base);
        transition: opacity 150ms ease-in-out;
        border-radius: 4px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        grid-auto-rows: max-content;

        &_date-range {
            grid-auto-rows: auto;
        }
    }

    &__calendar-button {
        font-weight: 400;
        padding-left: 16px;
        padding-right: 16px;
    }

    &__period-calendar {
        width: 164px;
        background: var(--color-bg-base-1);
        box-sizing: border-box;
        padding: 16px;
        display: flex;
        gap: 24px;
        flex-direction: column;
    }

    &__calendar-body {
        display: grid;
        justify-content: center;
        box-sizing: border-box;
        overflow: hidden auto;
        overscroll-behavior: contain;
        padding-right: 12px;
        margin-right: -12px;
        padding-bottom: 1px;
        padding-left: 1px;
    }

    &__month-name {
        color: var(--color-text-basic);
        margin-top: 32px;
        text-transform: capitalize;
        font-family: inherit;

        &:first-child {
            margin-top: 0;
        }
    }

    &__weekdays {
        display: flex;
        justify-content: center;
        margin-top: 16px;
        margin-bottom: 4px;
    }

    &__weekday {
        width: var(--date-picker-date-item-size);
        height: var(--date-picker-date-item-size);
        font-size: var(--date-picker-date-item-font-size);
        display: flex;
        justify-content: center;
        align-items: center;
        text-transform: uppercase;

        &_weekend {
            color: var(--color-text-error);
        }
    }

    &__month-row-controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        user-select: none;
        gap: 16px;
        font-family: inherit;
        height: 100%;
        width: 100%;
    }

    &__month-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        user-select: none;
        gap: 16px;
        font-family: inherit;
        width: 100%;
    }

    &__row-center {
        text-transform: capitalize;
    }

    &__row-left {

        &_disabled {
            visibility: hidden;
            pointer-events: none;
        }
    }

    &__row-left,
    &__row-right {
        width: var(--date-picker-date-switch-control-size);
        height: var(--date-picker-date-switch-control-size);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        outline: none;
        background-color: transparent;

        @media (hover: hover) and (pointer: fine) {

            &:hover {
                opacity: 0.7;
            }
        }

        & > svg {
            width: var(--date-picker-date-switch-control-svg-size);
            height: var(--date-picker-date-switch-control-svg-size);
        }
    }

    &__dates {
        position: relative;
    }

    &__date {
        user-select: none;
        width: var(--date-picker-date-item-size);
        height: var(--date-picker-date-item-size);
        display: flex;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
        transition: background-color 0.15s ease-in-out;
        padding: 0;
        border: none;
        background-color: transparent;
        font-family: inherit;

        &_today {

            &::after {
                content: "";
                display: block;
                position: absolute;
                top: 1px;
                left: 1px;
                border-top: 8px solid var(--color-border-warning);
                border-right: 8px solid transparent;
            }
        }

        &_first-day,
        &_last-day {
            position: relative;
        }

        &_muted {
            cursor: not-allowed;
            color: var(--color-text-disabled);

            @media (hover: hover) and (pointer: fine) {

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

        &_border {
            position: relative;

            &::before {
                content: "";
                z-index: 1;
                display: block;
                position: absolute;
                width: var(--date-picker-date-item-before-size);
                height: var(--date-picker-date-item-before-size);
                box-sizing: border-box;
                border: 1px solid var(--color-border-basic);
            }
        }

        &_selected {
            background-color: var(--color-components-bg-lightblue);
        }

        &_hovered {
            background-color: var(--color-components-bg-lightblue);
        }

        @media (hover: hover) and (pointer: fine) {

            &:hover {

                &::before {
                    border-color: var(--color-border-brand);
                    border-radius: 4px;
                    z-index: 2;
                }
            }
        }

        &_disabled {
            color: var(--color-text-disabled);
            cursor: not-allowed;
        }
    }

    &__dates-week {
        display: flex;
        justify-content: center;

        &:first-child {

            ^^&__date {

                &_first-day::before {
                    border-radius: 4px 0 0;
                }

                &_border:last-child::before {
                    border-radius: 0 4px 0 0;
                }

                @media (hover: hover) and (pointer: fine) {

                    &:hover {

                        &::before {
                            border-color: var(--color-border-brand);
                            border-radius: 4px;
                            z-index: 2;
                        }
                    }
                }
            }
        }

        &:last-child {

            ^^&__date {

                &_last-day::before {
                    border-radius: 0 0 4px;
                }

                &_border:first-child::before {
                    border-radius: 0 0 0 4px;
                }

                @media (hover: hover) and (pointer: fine) {

                    &:hover {

                        &::before {
                            border-color: var(--color-border-brand);
                            border-radius: 4px;
                            z-index: 2;
                        }
                    }
                }
            }
        }
    }

    /* stylelint-disable at-rule-disallowed-list */
    &__input-date-field {

        @-moz-document url-prefix() {
            padding: 9px 1px 9px 9px;
        }
    }

    &__input-date-input {

        @-moz-document url-prefix() {
            letter-spacing: -0.8px;
        }
    }

    &__input-date-icon {

        @-moz-document url-prefix() {
            display: none;
        }
    }
    /* stylelint-enable at-rule-disallowed-list */
}