@use '../../styles/bootstrap/variables' as bootstrap-variables;
@use '../../styles/variables';
@use './variables.scss' as style;

.#{style.$calendar-prefix-cls}-picker-container {
    z-index: style.$zindex-picker;
    .#{style.$calendar-prefix-cls} {
        display: flex;
        &-picker-inner-popup {
            width: 270px;
            display: block;
        }
        &-picker-inner-popup-with-range-input {
            .#{style.$calendar-prefix-cls}-picker-inner-popup-range-input {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                padding: 20px 18px 5px 18px;
                input {
                    width: 136px;
                }
                .split {
                    width: 15px;
                    height: 1px;
                    background-color: variables.$gray-300;
                }
            }

            .#{style.$calendar-prefix-cls}-header {
                border-bottom: none;
            }
        }
        &-panel {
            flex: 1;
        }
        &-picker-shortcut {
            width: 120px;
            padding: 18px;
            border-right: 1px solid variables.$gray-200;
            &-item {
                width: 84px;
                height: 28px;
                line-height: 26px;
                display: inline-block;
                text-align: center;
                border: 1px solid variables.$gray-200;
                border-radius: 4px;
                font-size: variables.$font-size-sm;
                margin-top: 10px;
                cursor: variables.$hand-cursor;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                transition: all 0.15s ease-in-out;
                &:hover {
                    color: variables.$primary;
                    border-color: variables.$primary;
                }
                &:nth-child(1) {
                    margin-top: 0;
                }
                &.disabled {
                    cursor: variables.$disabled-cursor;
                    color: variables.$gray-400;
                    background-color: variables.$gray-100;
                    border-color: variables.$gray-300;
                }
            }
        }
        &-body {
            padding: 18px 18px 10px 18px;
        }
    }

    .#{style.$calendar-prefix-cls}-picker-shortcut-bottom {
        flex-flow: column-reverse;
        .#{style.$calendar-prefix-cls}-picker-shortcut {
            width: 270px;
            border-right: 0;
            overflow: hidden;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding-top: 8px;
            border-top: 1px solid variables.$gray-200;
            &-item {
                width: 72px;
                margin-top: 10px;
            }
        }
    }

    .#{style.$calendar-prefix-cls}-decade,
    .#{style.$calendar-prefix-cls}-year,
    .#{style.$calendar-prefix-cls}-month {
        height: 288px;
        display: flex;
        flex-direction: column;
        .#{style.$calendar-prefix-cls}-body {
            flex: 1;
        }
    }
    .#{style.$calendar-prefix-cls}-decade {
        .#{style.$calendar-prefix-cls}-body {
            padding: 8px 0;
        }
    }
    .#{style.$calendar-prefix-cls}-quarter {
        .#{style.$calendar-prefix-cls}-body {
            padding: 18px;
        }
    }
}

.#{style.$calendar-prefix-cls}-picker {
    position: relative;
    display: inline-block;
    outline: none;
    transition: opacity 0.3s;
    width: 100%;
    cursor: variables.$hand-cursor;
    .panel-is-opened {
        border-color: variables.$primary;
    }
    .form-control {
        padding-right: variables.$input-padding-x + variables.$font-size-md;
    }

    &-input {
        outline: none;
        &:not(.thy-input-readonly) {
            cursor: variables.$hand-cursor;
        }
        &.thy-input-disabled {
            cursor: variables.$disabled-cursor;
        }

        &.thy-input {
            line-height: variables.$line-height-base;
        }
    }

    &-input.thy-input-sm {
        padding-top: 0;
        padding-bottom: 0;
    }

    &-clear,
    &-icon {
        position: absolute;
        top: 50%;
        right: style.$control-padding-horizontal;
        z-index: 1;
        transition: all 0.3s;
        user-select: none;
        transform: translateY(-50%);
        display: inline-flex;
    }

    &-clear {
        z-index: 2;
        background: bootstrap-variables.$input-bg;
        cursor: variables.$hand-cursor;
        opacity: 0;
        pointer-events: none;
    }

    &:hover &-clear {
        opacity: 1;
        pointer-events: auto;
    }

    &-icon {
        color: variables.$gray-400;
    }

    &-small &-clear,
    &-small &-icon {
        right: style.$control-padding-horizontal-sm;
    }
}

.thy-popover-container .#{style.$calendar-prefix-cls} {
    box-shadow: variables.$box-shadow-none;
}
