// 提供含有 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-picker2/scss/variable";
@import "~@alifd/next/lib/date-picker/scss/variable";
@import "~@alifd/next/lib/date-picker/scss/mixin";
@import "~@alifd/next/lib/calendar2/scss/variable";
@import "~@alifd/next/lib/calendar2/scss/mixin";
@import "../calendar2/variables.scss";



#{$date-picker2-prefix} {

  //替换日历icon
  .#{$css-prefix}icon.#{$css-prefix}icon-calendar:before {
    content: $b-design-date-picker2-calendar-icon;
  }

  &-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);

      &.#{$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;
          }
        }
      }
    }
  }


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

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

  &-wrapper {
    #{$calendar2-prefix} {
      &-body {
        width: 310px;
        padding-left: 14px;
        padding-right: 14px;
      }

      &-cell::before {
        height: $b-design-calendar2-cell-inner-width;
      }

      &-cell:last-child::before {
        right: calc(8px - ($b-design-calendar2-cell-inner-width - 24px) / 2);
      }

      &-cell:first-child::before {
        left: calc(8px - ($b-design-calendar2-cell-inner-width - 24px) / 2);
      }
    }
  }

  &-input-separator {
    color: $color-text1-2;
  }

  //部分禁止的样式
  #{$date-picker2-prefix}-input-range:not(#{$date-picker2-prefix}-input-disabled) {
    .#{$css-prefix}input.#{$css-prefix}disabled {
      background-color: #F3F3F3;
    }
  }
}

#{$date-picker2-prefix}-input {
  background: #f3f3f3;
}

#{$date-picker2-prefix} {
  &-wrapper {
    background: $date-picker-panel-background;
    border-color: transparent;
    border-radius: $popup-local-corner;

  }
}

#{$range-picker2-prefix}-panel:not(#{$range-picker2-prefix}-panel-single) {
  #{$calendar2-prefix}-cell-disabled {
    #{$calendar2-cell-inner} {
      @include b-design-calendar-disabled;
      cursor: no-drop;
    }
  }

  #{$calendar2-prefix}-cell-current:not(#{$calendar2-prefix}-cell-disabled) {
    &#{$calendar2-prefix}-cell-selected {
      &::before {
        color: $color-text1-5;
        background: $color-brand1-1;
      }

      #{$calendar2-cell-inner} {
        color: $color-text1-5;
        background: transparent;
      }

      &#{$calendar2-prefix}-cell-range-begin,
      &#{$calendar2-prefix}-cell-range-end {
        #{$calendar2-cell-inner} {
          @include b-design-calendar-selected;
        }
      }

      &#{$calendar2-prefix}-cell-range-begin::before {
        left: 50%;
      }

      &#{$calendar2-prefix}-cell-range-end::before {
        right: 50%;
      }

      &#{$calendar2-prefix}-cell-range-begin-single::before,
      &#{$calendar2-prefix}-cell-range-end-single::before {
        display: none;
      }
    }

    &#{$calendar2-prefix}-cell-hover {
      &::after {
        border-style: $b-design-date-picker2-hover-border-style;
        border-color: $color-brand1-6 transparent;
        height: $b-design-calendar2-cell-inner-width;
      }

      &#{$calendar2-prefix}-cell-hover-begin::after,
      &:first-child::after {
        left: calc(8px - ($b-design-calendar2-cell-inner-width - 24px) / 2);
      }

      &#{$calendar2-prefix}-cell-hover-end::after,
      &:last-child::after {
        right: calc(8px - ($b-design-calendar2-cell-inner-width - 24px) / 2);
      }

      &#{$calendar2-prefix}-cell-selected {
        &#{$calendar2-prefix}-cell-hover-begin::after {
          left: calc(8px - ($b-design-calendar2-cell-inner-width - 24px) / 2);
        }

        &#{$calendar2-prefix}-cell-hover-end::after {
          right: calc(8px - ($b-design-calendar2-cell-inner-width - 24px) / 2);
        }
      }

      &:first-of-type::after {
        border-left-style: $b-design-date-picker2-hover-border-style;
      }

      &:last-of-type::after {
        border-right-style: $b-design-date-picker2-hover-border-style;
      }
    }

    &:first-of-type::after {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      border-left: 1px $b-design-date-picker2-hover-border-style $color-brand1-6;
    }

    &:last-of-type::after {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      border-right: 1px $b-design-date-picker2-hover-border-style $color-brand1-6;
    }

    &#{$calendar2-prefix}-cell-edge-end {
      &::before {
        right: calc(8px - ($b-design-calendar2-cell-inner-width - 24px) / 2);
      }

      &::after {
        right: calc(8px - ($b-design-calendar2-cell-inner-width - 24px) / 2);
      }

      &#{$calendar2-prefix}-cell-hover {
        &::after {
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;
          border-right: 1px $b-design-date-picker2-hover-border-style $color-brand1-6;
        }
      }
    }

    &#{$calendar2-prefix}-cell-hover-begin::after {
      border-top: 1px $b-design-date-picker2-hover-border-style $color-brand1-6;
      border-left: 1px $b-design-date-picker2-hover-border-style $color-brand1-6;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    &#{$calendar2-prefix}-cell-hover-end::after {
      border-top: 1px $b-design-date-picker2-hover-border-style $color-brand1-6;
      border-right: 1px $b-design-date-picker2-hover-border-style $color-brand1-6;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }

  #{$calendar2-prefix}-cell-edge-end+#{$calendar2-prefix}-cell-current:not(#{$calendar2-prefix}-cell-disabled) {

    &::before,
    &::after {
      left: calc(8px - ($b-design-calendar2-cell-inner-width - 24px) / 2);
    }

    &#{$calendar2-prefix}-cell-hover {
      &::after {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-left: 1px $b-design-date-picker2-hover-border-style $color-brand1-6;
      }
    }
  }
}

#{$range-picker2-prefix}-arrow {
  display: none;
}

#{$calendar2-prefix}-table-week {
  #{$calendar2-prefix}-week-current {
    #{$calendar2-prefix}-cell#{$calendar2-prefix}-cell-selected {

      &::before,
      #{$calendar2-cell-inner} {
        color: $color-text1-5;
        background-color: $color-brand1-1;
      }

      &:last-child,
      &:nth-child(2) {
        #{$calendar2-cell-inner} {
          color: $color-white !important;
          background: $color-brand1-6 !important;

        }
      }
    }
  }

  tr:not(#{$calendar2-prefix}-week-current) {
    td#{$calendar2-prefix}-cell#{$calendar2-prefix}-cell-selected:not(.#{$css-prefix}calendar2-cell-disabled) {

      &::before,
      #{$calendar2-cell-inner} {
        background-color: transparent;
        color: $color-text1-2;
      }
    }
  }
}

#{$range-picker2-prefix}-panel #{$calendar2-prefix}-week-current {
  #{$calendar2-prefix}-cell-selected:not(#{$calendar2-prefix}-cell-disabled) {

    &:last-child,
    &:nth-child(2) {
      #{$calendar2-cell-inner} {
        background-color: $color-brand1-6;
        color: white;
      }
    }

    &#{$calendar2-prefix}-cell-week-range-begin,
    &#{$calendar2-prefix}-cell-week-range-end {

      &:last-child,
      &:nth-child(2) {
        #{$calendar2-cell-inner} {
          @include b-design-calendar-selected;
        }
      }
    }
  }
}

#{$range-picker2-prefix}-panel:not(#{$range-picker2-prefix}-panel-single) {
  .#{$css-prefix}calendar2-cell-current:not(.#{$css-prefix}calendar2-cell-disabled).#{$css-prefix}calendar2-cell-hover {
    &:last-of-type::after {
      border-right: 1px solid $color-brand1-6;
    }

    &:first-of-type::after {
      border-left: 1px solid $color-brand1-6;
    }
  }
}


//theme=grey
#{$date-picker2-prefix}.#{$css-prefix}grey {

  .#{$css-prefix}date-picker2-input {
    border-color: white;
  }

  &:hover {
    #{$date-picker2-prefix}-input:not(.#{$css-prefix}date-picker2-input-disabled) {
      border-color: white;
    }


  }

  //部分禁止的样式
  #{$date-picker2-prefix}-input-range:not(#{$date-picker2-prefix}-input-disabled) {
    .#{$css-prefix}input.#{$css-prefix}disabled {
      background-color: white;
    }
  }
}

.#{$css-prefix}overlay-inner.#{$css-prefix}grey {
  #{$date-picker2-prefix}-wrapper {
    background-color: white;
  }
}