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

#{$calendar2-prefix} {
  background: $date-picker-panel-background;

  &-panel {
    #{$calendar2-prefix} {
      &-table {

        th,
        td {
          padding: 2px 0;
        }
      }
    }

    #{$calendar2-cell-inner} {
      height: $b-design-calendar2-cell-inner-width;
      line-height: $b-design-calendar2-cell-inner-width - 2px;
    }

    #{$calendar2-prefix}-header {
      height: $b-design-calendar2-header-height;
      padding: $b-design-calendar2-header-height-padding-tb $b-design-calendar2-header-height-padding-lr;

      &-btn {
        padding: 0px !important;
        width: $s-6;
        height: $s-6;
        color: $calendar-btn-arrow-color;

        &:hover {
          background-color: $color-fill1-2;
          color: $calendar-btn-arrow-color-hover;

          >span {
            color: $calendar-btn-arrow-color-hover;
          }
        }
      }

      .#{$css-prefix}calendar2-header-text-field {
        .#{$css-prefix}btn-text {
          &:hover {
            background-color: transparent;

            >span {
              color: $color-text1-5;
            }
          }
        }
      }


      &-text-field {
        height: $b-design-calendar2-header-text-field-height;
        line-height: $b-design-calendar2-header-text-field-height;

        #{$calendar2-prefix}-header-btn {
          width: auto;
        }
      }
    }
  }

  #{$calendar2-cell-inner} {
    color: $color-text1-1;
    outline: none;
    position: relative;
    border: 1px solid transparent;
    border-radius: $calendar-card-table-cell-date-border-radius;
    min-width: $b-design-calendar2-cell-inner-width;
  }

  &-cell-disabled {
    &::before {
      @include b-design-calendar-disabled;
    }

    .#{$css-prefix}calendar2-cell-inner {
      cursor: no-drop;
    }
  }

  &-card,
  &-panel {
    #{$calendar2-prefix} {

      &-table-month,
      &-table-year,
      &-table-decade {
        #{$calendar2-prefix}-cell-inner {
          min-width: $b-design-calendar2-card-cell-inner-width;
        }
      }

      &-table-quarter {
        #{$calendar2-prefix}-cell-inner {
          min-width: $b-design-calendar2-card-cell-inner-width;
        }
      }
    }

    #{$calendar2-cell-inner} {
      border-radius: $calendar-card-table-cell-date-border-radius;
    }

    //上下月的hover
    #{$calendar2-prefix}-cell {
      &:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-today) {
        &:hover:not(#{$calendar2-prefix}-cell-current) #{$calendar2-cell-inner} {
          background: $color-fill1-2;
        }
      }
    }

    #{$calendar2-prefix}-cell-current {
      &:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-selected):not(#{$calendar2-prefix}-cell-today) {
        #{$calendar2-cell-inner} {
          @include b-design-calendar-current;
        }
      }

      &:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-today) {
        &:hover:not(#{$calendar2-prefix}-cell-current) #{$calendar2-cell-inner} {
          @include calendar-hover;
        }
      }
    }

    #{$calendar2-prefix}-cell-current {
      &#{$calendar2-prefix}-cell-today:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-selected) {
        #{$calendar2-cell-inner} {
          color: $color-brand1-6;

          &:before {
            content: "";
            width: 4px;
            height: 4px;
            border-radius: 100%;
            background-color: $color-brand1-6;
            position: absolute;
            left: 50%;
            margin-left: calc(0px - (4px / 2));
            bottom: 4px;
          }
        }


      }

      &#{$calendar2-prefix}-cell-today:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-selected):not(#{$calendar2-prefix}-cell-hover) {
        &:hover {
          #{$calendar2-cell-inner} {
            @include calendar-hover;
          }

        }
      }

      &#{$calendar2-prefix}-cell-selected:not(#{$calendar2-prefix}-cell-disabled) {
        #{$calendar2-cell-inner} {
          @include b-design-calendar-selected;
        }
      }
    }


  }

  &-fullscreen {
    .#{$css-prefix}calendar2-table th {
      font-weight: normal;
    }

    #{$calendar2-cell-inner} {
      padding-top: $s-3;
      min-height: $b-design-calendar2-fullscreen-cell-min-height;
      font-size: $b-design-calendar2-fullscreen-cell-font-size;
    }
  }


}

//theme=grey
#{$calendar2-prefix}.#{$css-prefix}grey {
  background: white;

  &.#{$css-prefix}calendar2-fullscreen {
    #{$calendar2-cell-inner} {
      border-radius: 0px;
    }

    #{$calendar2-prefix}-cell-disabled #{$calendar2-cell-inner} {
      @include calendar-disabled-fullscreen;
    }

    #{$calendar2-prefix}-cell {
      &:hover #{$calendar2-cell-inner} {
        background-color: $color-fill1-1;

      }
    }

    #{$calendar2-prefix}-cell-current {
      &:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-selected):not(#{$calendar2-prefix}-cell-today) {
        #{$calendar2-cell-inner} {
          color: $color-text1-5;
        }

        &:hover #{$calendar2-cell-inner} {
          background-color: $color-fill1-1;

        }
      }

      &#{$calendar2-prefix}-cell-today {
        #{$calendar2-cell-inner} {
          color: $color-text1-5;
          border-top-color: $color-brand1-6 !important;
        }
      }

      #{$calendar2-cell-inner} {
        background-color: $color-white;
      }

      &#{$calendar2-prefix}-cell-selected:not(#{$calendar2-prefix}-cell-disabled) {
        #{$calendar2-cell-inner} {
          @include calendar-selected-fullscreen;
          border-top-color: $color-line1-2;
          font-weight: normal;
        }
      }
    }
  }
}

.#{$css-prefix}overlay-inner.#{$css-prefix}grey {
  #{$calendar2-prefix} {
    background: $b-design-date-picker-white-panel-background;

    &-panel {
      #{$calendar2-prefix}-header {
        &-btn {
          &:hover {
            background-color: $color-fill1-1;
          }
        }

        .#{$css-prefix}calendar2-header-text-field {
          .#{$css-prefix}btn-text {
            &:hover {
              background-color: transparent;
            }
          }
        }
      }
    }

    &-card,
    &-panel {

      //上下月的hover
      #{$calendar2-prefix}-cell {
        &:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-today) {
          &:hover:not(#{$calendar2-prefix}-cell-current) #{$calendar2-cell-inner} {
            background: $color-fill1-1;
          }
        }
      }

      #{$calendar2-prefix}-cell-current {
        &:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-today) {
          &:hover:not(#{$calendar2-prefix}-cell-current) #{$calendar2-cell-inner} {
            @include b-design-calendar-grey-hover;
          }
        }
      }

      #{$calendar2-prefix}-cell-current {
        &:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-selected):not(#{$calendar2-prefix}-cell-today) {
          &:hover:not(#{$calendar2-prefix}-cell-hover) #{$calendar2-cell-inner} {
            @include b-design-calendar-grey-hover;
          }
        }

        &#{$calendar2-prefix}-cell-today:not(#{$calendar2-prefix}-cell-disabled):not(#{$calendar2-prefix}-cell-selected):not(#{$calendar2-prefix}-cell-hover) {
          &:hover {
            #{$calendar2-cell-inner} {
              @include b-design-calendar-grey-hover;
            }

          }
        }
      }


    }
  }

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

    tr:hover {
      .#{$css-prefix}calendar2-cell:not(.#{$css-prefix}calendar2-cell-disabled):not(.#{$css-prefix}calendar2-cell-selected)::before {
        @include b-design-calendar-grey-hover
      }
    }
  }

  .#{$css-prefix}date-picker2-input-range-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;
          }
        }
      }
    }
  }
}

#{$calendar2-prefix}-header-select-month-popup,
#{$calendar2-prefix}-header-select-year-popup {
  #{$menu-prefix} {
    background: $b-design-select-white-menu-bg-color;

    &-item {
      color: $b-design-select-white-menu-item-text-color;

      &.#{$css-prefix}selected {
        background-color: $b-design-select-white-menu-bg-color;
        color: $color-brand1-6;
      }


      &:not(.#{$css-prefix}disabled).#{$css-prefix}focused:hover,
      &:not(.#{$css-prefix}disabled):hover {
        @include menu-item-state($menu-color,
          $b-design-select-white-menu-hover-bg-color,
          $menu-arrow-color-hover,
          $menu-icon-selected-hover-color);
      }

      &:not(.#{$css-prefix}disabled):active {
        @include menu-item-state($menu-color,
          $b-design-select-white-menu-hover-bg-color,
          $menu-arrow-color-hover,
          $menu-icon-selected-hover-color);
      }


      &:not(.#{$css-prefix}disabled).#{$css-prefix}selected:hover,
      &:not(.#{$css-prefix}disabled).#{$css-prefix}selected.#{$css-prefix}focused:hover,
      &:not(.#{$css-prefix}disabled).#{$css-prefix}selected:focus:hover {
        @include menu-item-state($menu-color-selected,
          $b-design-select-white-menu-hover-bg-color,
          $menu-arrow-color-hover,
          $menu-icon-selected-hover-color);
      }

      &:not(.#{$css-prefix}disabled).#{$css-prefix}focused,
      &:not(.#{$css-prefix}disabled).#{$css-prefix}selected.#{$css-prefix}focused,
      &:not(.#{$css-prefix}disabled).#{$css-prefix}selected:focus {
        @include menu-item-state($menu-color-selected,
          $b-design-select-white-menu-bg-color,
          $menu-arrow-color-hover,
          $menu-icon-selected-hover-color);
      }

      &:not(.#{$css-prefix}disabled).#{$css-prefix}focused {
        color: $b-design-select-white-menu-item-text-color;
      }

      &.#{$css-prefix}disabled,
      &.#{$css-prefix}disabled #{$menu-prefix}-item-text>a {
        @include menu-item-state($menu-color-disabled,
          $b-design-select-white-menu-bg-color,
          $menu-color-disabled,
          $menu-color-disabled);
        cursor: not-allowed;
      }
    }

    &::-webkit-scrollbar-track {
      background: $b-design-select-white-menu-bg-color;
    }
  }
}

.wrapped-calendar {
  width: 400px !important;
}