// 提供含有 css variables 的 sass variables 供覆盖

@import "../utils.scss";
@import "./variables.scss";
@import "../input/variables.scss";

@import "~@alifd/next/lib/core/index-noreset"; // next core style
@import "../button/variables.scss";
@import "~@alifd/next/lib/button/scss/variable"; // next button variables
@import "~@alifd/next/lib/button/scss/mixin"; // next button mixin
@import "~@alifd/next/lib/date-picker/scss/variable"; // next button variables
@import "~@alifd/next/lib/date-picker/scss/mixin";

//white bg下
#{$date-picker-prefix},
#{$month-picker-prefix},
#{$year-picker-prefix},
#{$week-picker-prefix} {
  &:hover {
    .#{$css-prefix}input:not(.#{$css-prefix}disabled) {
      box-shadow: $b-design-input-hover-shadow;
      border-radius: $s-1;
    }
  }

  &-body {
    width: 308px;
  }

  //theme = grey
  &.#{$css-prefix}grey {
    .#{$css-prefix}input:not(.#{$css-prefix}disabled) {
      border: $input-border-width solid $b-design-input-grey-bg-color;
      background-color: $b-design-input-grey-bg-color;

      &.#{$css-prefix}focus {
        border-color: $input-focus-border-color;
        box-shadow: none;
      }
    }
  }
}

#{$range-picker-prefix} {
  &:not(.#{$css-prefix}disabled):hover {
    box-shadow: $b-design-input-hover-shadow;
    border-radius: $s-1;
  }

  .#{$css-prefix}input,
  .#{$css-prefix}input.#{$css-prefix}focus {
    box-shadow: none !important;
  }

  .#{$css-prefix}range-date-picker-focus {
    border-color: $color-brand1-6;
  }

  //theme = grey
  &.#{$css-prefix}grey {
    &:not(.#{$css-prefix}disabled) .#{$css-prefix}range-picker-trigger {
      background-color: $b-design-input-grey-bg-color;
    }

    .#{$css-prefix}input:not(.#{$css-prefix}disabled) {
      border: $input-border-width solid $b-design-input-grey-bg-color;
      background-color: $b-design-input-grey-bg-color;
    }
  }
}

#{$date-picker-prefix},
#{$range-picker-prefix},
#{$month-picker-prefix},
#{$year-picker-prefix},
#{$week-picker-prefix} {
  .#{$css-prefix}input.#{$css-prefix}focus {
    box-shadow: none !important;
  }

  &-body {
    margin-top: $s-2;
    border-width: $b-design-date-picker-white-bg-popup-local-border-width;

    .#{$css-prefix}calendar {
      padding: 0 $b-design-date-picker-calendar-padding-lr;
      padding-bottom: $b-design-date-picker-calendar-padding-bottom;
    }
  }

  &-panel {
    &-header {
      display: none;
    }

    &-footer {
      .#{$css-prefix}btn.#{$css-prefix}small {
        @include next-button-size($b-design-btn-size-xs-padding,
          $b-design-btn-size-xs-height,
          $b-design-btn-size-xs-font,
          $b-design-btn-size-xs-border-width,
          $b-design-btn-size-xs-corner,
          $b-design-btn-size-xs-icon-margin,
          $b-design-btn-size-xs-icon-size,
          $b-design-btn-size-xs-icon-split-size);

        // padding: 0 $b-design-btn-size-xs-padding;
        // height: $b-design-btn-size-xs-height;
        // font-size: $b-design-btn-size-xs-font;

        &.#{$css-prefix}btn {
          &-primary {
            padding: $b-design-btn-primary-xs-padding;

            &:hover {
              box-shadow: $b-design-btn-primary-box-shadow-xs-hover;
            }

            &:active {
              box-shadow: $b-design-btn-primary-box-shadow-xs-active;
            }
          }

          &-secondary {
            &:hover {
              box-shadow: $b-design-btn-secondary-box-shadow-xs-hover;
            }

            &:active {
              box-shadow: $b-design-btn-secondary-box-shadow-xs-active;
            }
          }

          &-normal {
            &:hover {
              box-shadow: $b-design-btn-normal-box-shadow-xs-hover;
            }

            &:active {
              box-shadow: $b-design-btn-normal-box-shadow-xs-active;
            }
          }

          &-warning {
            &:hover {
              box-shadow: $b-design-btn-warning-box-shadow-xs-hover;
            }

            &:active {
              box-shadow: $b-design-btn-warning-box-shadow-xs-active;
            }
          }
        }
      }
    }

    &-time {
      border-top: 0px;
    }
  }

  &.#{$css-prefix}large {
    height: $form-element-large-height;
  }

  &.#{$css-prefix}medium {
    height: $form-element-medium-height;
  }

  &.#{$css-prefix}small {
    height: $form-element-small-height;
  }

}

.#{$css-prefix}grey {

  &#{$date-picker-prefix},
  &#{$range-picker-prefix},
  &#{$month-picker-prefix},
  &#{$year-picker-prefix},
  &#{$week-picker-prefix} {
    &-body {
      border: $popup-local-border-width $popup-local-border-style $b-design-grey-popup-local-border-color;
      background: $b-design-grey-date-picker-panel-background;
    }
  }
}