@import "../core/index-noreset.scss";
@import "../input/scss/variable.scss";
@import "../input/scss/mixin.scss";
@import "../time-picker/scss/variable.scss";

@import "./scss/variable";
@import "./scss/mixin";

@import "./scss/date-picker.scss";
@import "./scss/range-picker.scss";
@import "./rtl.scss";

#{$date-picker-prefix},
#{$range-picker-prefix},
#{$month-picker-prefix},
#{$year-picker-prefix},
#{$week-picker-prefix} {
    @include box-sizing;

    &-body {
        border: $popup-local-border-width $popup-local-border-style $popup-local-border-color;
        border-radius: $popup-local-corner;
        box-shadow: $popup-local-shadow;
        background: $date-picker-panel-background;
    }

    &-panel {
        &-header {
            padding: 6px;
            text-align: center;
        }

        &-time {
            border-top: $popup-local-border-width $popup-local-border-style $popup-local-border-color;
        }

        &-footer {
            text-align: right;
            padding: $date-picker-panel-footer-padding-tb $date-picker-panel-footer-padding-lr;
            border-top: $popup-local-border-width $popup-local-border-style $popup-local-border-color;
        }

        &-footer > #{$date-picker-btn-prefix}:not(:last-child),
        &-tools > #{$date-picker-btn-prefix}:not(:last-child) {
            margin-right: $s-4;
        }

        &-tools {
            float: left;
        }
    }

    .#{$css-prefix}calendar-panel-header {
        margin-left: calc(0px - #{$popup-local-border-width});
        margin-right: calc(0px - #{$popup-local-border-width});
    }

    #{$date-picker-input-prefix} input {
        vertical-align: baseline;
    }

    &-symbol-calendar-icon::before {
        content: $date-picker-calendar-icon;
    }
}

#{$range-picker-prefix}-panel-body {
    .#{$css-prefix}calendar {
        display: inline-block;
        width: 50%;
    }
}