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

$input-box-height: 34px;

.#{style.$calendar-prefix-cls}-range-picker-input {
    width: 44%;
    height: 99%;
    text-align: center;
    background-color: transparent;
    border: 0;
    outline: 0;
    @include mixin.placeholder();

    &[disabled] {
        cursor: variables.$disabled-cursor;
    }
}

.#{style.$calendar-prefix-cls}-range {
    overflow: hidden;
    &.#{style.$calendar-prefix-cls}-picker-shortcut-bottom {
        .#{style.$calendar-prefix-cls}-picker-shortcut {
            width: 540px;
            .#{style.$calendar-prefix-cls}-picker-shortcut-item {
                width: 118px;
            }
        }
    }

    .#{style.$calendar-prefix-cls}-date-panel {
        &::after {
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
            content: '.';
        }

        &-flexible {
            width: 338px;
            .#{style.$calendar-prefix-cls}-picker-inner-popup {
                width: 338px;
                .thy-calendar-body {
                    padding: 0px 10px 10px 10px;
                }
            }
            &-tab {
                border-bottom: 1px solid variables.$gray-200;
                position: relative;
                .thy-nav {
                    padding: 0 18px;
                    height: 40px;
                }
                .clear-date-button {
                    position: absolute;
                    right: 18px;
                    bottom: 8px;
                }
            }
        }
        &-advanced {
            padding: 20px 20px 0 20px;
        }
    }
    &-part {
        position: relative;
        width: 50%;
    }

    &-left {
        float: left;
    }

    &-right {
        float: right;
    }

    &-middle {
        position: absolute;
        left: 50%;
        z-index: 1;
        height: $input-box-height;
        margin: 1px 0 0 0;
        padding: 0 200px 0 0;
        color: variables.$secondary;
        line-height: $input-box-height;
        text-align: center;
        transform: translateX(-50%);
        pointer-events: none;
    }

    &.#{style.$calendar-prefix-cls}-time &-middle {
        padding: 0 10px 0 0;
        transform: translateX(-50%);
    }

    .#{style.$calendar-prefix-cls}-today
        :not(.#{style.$calendar-prefix-cls}-disabled-cell)
        :not(.#{style.$calendar-prefix-cls}-last-month-cell)
        :not(.#{style.$calendar-prefix-cls}-next-month-btn-day) {
        .#{style.$calendar-prefix-cls}-date {
            color: variables.$primary;
            background: variables.$primary;
            border-color: variables.$primary;
        }
    }

    .#{style.$calendar-prefix-cls}-selected-start-date,
    .#{style.$calendar-prefix-cls}-selected-end-date {
        @include mixin.calendar-selected-cell;
    }

    .#{style.$calendar-prefix-cls}-input,
    .#{calendar-timepicker-prefix-cls}-input {
        // .input;
        height: bootstrap-variables.$input-height-sm;
        padding-right: 0;
        padding-left: 0;
        line-height: bootstrap-variables.$input-height-sm;
        border: 0;
        box-shadow: variables.$box-shadow-none;

        &:focus {
            box-shadow: variables.$box-shadow-none;
        }
    }

    .#{calendar-timepicker-prefix-cls}-icon {
        display: none;
    }

    &.#{style.$calendar-prefix-cls}-week-number {
        width: 100%;

        .#{style.$calendar-prefix-cls}-range-part {
            width: 50%;
        }
    }

    .#{style.$calendar-prefix-cls}-month-panel .#{style.$calendar-prefix-cls}-year-panel {
        top: 0;
    }
    .#{style.$calendar-prefix-cls}-decade-panel-table,
    .#{style.$calendar-prefix-cls}-year-panel-table,
    .#{style.$calendar-prefix-cls}-month-panel-table {
        height: 208px;
    }

    .#{style.$calendar-prefix-cls}-in-range-cell {
        position: relative;
        border-radius: 0;
        > div {
            position: relative;
            z-index: 1;
        }
        &::before {
            height: 24px;
            position: absolute;
            top: 3px;
            right: 0;
            bottom: 4px;
            left: 0;
            display: block;
            border: 0;
            border-radius: 0;
            content: '';
            opacity: 0.1;
            background: variables.$primary;
        }
    }

    .#{style.$calendar-prefix-cls}-footer-extra {
        float: left;
    }

    // `div` for selector specificity
    div#{&}-quick-selector {
        text-align: left;

        > a {
            margin-right: 8px;
        }
    }

    thy-calendar,
    .#{style.$calendar-prefix-cls}-month-panel,
    .#{style.$calendar-prefix-cls}-year-panel,
    .#{style.$calendar-prefix-cls}-decade-panel {
        &-header {
            border-bottom: 0;
        }
    }

    &.#{style.$calendar-prefix-cls}-time {
        .#{calendar-timepicker-prefix-cls} {
            top: 68px;
            z-index: 2; // cover ..#{$calendar-prefix-cls}-range ..#{$calendar-prefix-cls}-in-range-cell > div (z-index: 1)
            width: 100%;
            height: 207px;
            &-panel {
                height: 267px;
                margin-top: -34px;
            }

            &-inner {
                height: 100%;
                padding-top: 40px;
                background: none;
            }

            &-combobox {
                display: inline-block;
                height: 100%;
                background-color: variables.$bg-default;
                border-top: style.$border-width-base style.$border-style-base style.$border-color-split;
            }
            &-select {
                height: 100%;
                ul {
                    max-height: 100%;
                }
            }
        }
        .#{style.$calendar-prefix-cls}-today-btn {
            height: 22px;
            margin: 8px 12px;
            line-height: 22px;
        }
    }
}
