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

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

#{$calendar-prefix} {

  &-btn-prev-decade,
  &-btn-prev-year {
    left: $b-design-calendar-btn-arrow-double-offset-lr;
  }

  &-btn-next-year,
  &-btn-next-decade {
    right: $b-design-calendar-btn-arrow-double-offset-lr;
  }

  &-btn {
    .#{$css-prefix}icon {
      margin-left: $b-design-calendar-btn-icon-margin-l;
    }
  }

  &-panel-header {
    &::before {
      content: "";
      width: calc(100% + 2 * #{$b-design-date-picker-calendar-padding-lr});
      height: 1px;
      background: $b-design-calendar-panel-header-line-color;
      position: absolute;
      bottom: 0;
      left: -$b-design-date-picker-calendar-padding-lr;
    }
  }
}

#{$calendar-prefix}-card,
#{$calendar-prefix}-panel,
#{$calendar-prefix}-range {
  #{$calendar-prefix} {
    &-cell-current {

      #{$calendar-prefix}-date,
      #{$calendar-prefix}-month,
      #{$calendar-prefix}-year {
        position: relative;

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

        &:hover {
          @include calendar-cell-state ($b-design-white-calendar-table-cell-other-hover-background,
            $calendar-card-table-cell-current-color,
            $b-design-white-calendar-table-cell-other-hover-border-color);
        }

      }
    }

    &-cell-prev-month {
      #{$calendar-prefix}-date {

        &:hover {
          @include calendar-cell-state ($b-design-white-calendar-table-cell-other-hover-background,
            $b-design-white-calendar-table-cell-other-hover-color,
            $b-design-white-calendar-table-cell-other-hover-border-color);
        }
      }
    }

    &-cell-next-month {
      #{$calendar-prefix}-date {
        &:hover {
          @include calendar-cell-state ($b-design-white-calendar-table-cell-other-hover-background,
            $b-design-white-calendar-table-cell-other-hover-color,
            $b-design-white-calendar-table-cell-other-hover-border-color);
        }

      }
    }
  }
}


#{$calendar-prefix}-btn-prev-year,
#{$calendar-prefix}-btn-prev-month,
#{$calendar-prefix}-btn-prev-decade,
#{$calendar-prefix}-btn-next-month,
#{$calendar-prefix}-btn-next-year,
#{$calendar-prefix}-btn-next-decade {
  margin-top: $s-3;
  width: $b-design-calendar-calendar-header-btn-size;
  height: $b-design-calendar-calendar-header-btn-size;
  border-radius: $s-1;

  &.hover,
  &:hover {
    background-color: $color-fill1-2;
  }
}

//theme=grey
.#{$css-prefix}grey {
  #{$calendar-prefix}-fullscreen {

    #{$calendar-prefix} {

      &-cell {
        &.#{$css-prefix}selected {

          #{$calendar-prefix}-date,
          #{$calendar-prefix}-month {
            font-weight: $calendar-fullscreen-table-cell-select-font-weight;

            @include calendar-cell-state ($calendar-fullscreen-table-cell-select-background,
              $calendar-fullscreen-table-cell-select-color,
              $calendar-fullscreen-table-cell-select-border-color);
          }
        }

        &.#{$css-prefix}disabled {

          #{$calendar-prefix}-date,
          #{$calendar-prefix}-month {
            cursor: not-allowed;
            @include calendar-cell-state ($b-design-grey-calendar-fullscreen-table-cell-disabled-background,
              $b-design-grey-calendar-fullscreen-table-cell-disabled-color,
              $b-design-grey-calendar-fullscreen-table-cell-disabled-border-color);
          }
        }
      }

      &-date,
      &-month {

        @include calendar-cell-state ($b-design-grey-calendar-fullscreen-table-cell-normal-background,
          $calendar-fullscreen-table-cell-normal-color,
          $b-design-grey-calendar-fullscreen-table-cell-normal-border-color);

        &:hover {
          @include calendar-cell-state ($b-design-grey-calendar-fullscreen-table-cell-hover-background,
            $b-design-grey-calendar-fullscreen-table-cell-hover-color,
            $b-design-grey-calendar-fullscreen-table-cell-hover-border-color);
        }
      }

      &-cell-prev-month,
      &-cell-next-month {
        #{$calendar-prefix}-date {
          @include calendar-cell-state ($b-design-grey-calendar-fullscreen-table-cell-other-background,
            $b-design-grey-calendar-fullscreen-table-cell-other-color,
            $b-design-grey-calendar-fullscreen-table-cell-other-border-color);

          &:hover {
            @include calendar-cell-state ($b-design-grey-calendar-fullscreen-table-cell-hover-background,
              $b-design-grey-calendar-table-cell-other-hover-color,
              $b-design-grey-calendar-fullscreen-table-cell-hover-border-color);
          }
        }
      }

      &-cell-current {

        #{$calendar-prefix}-date,
        #{$calendar-prefix}-month {
          @include calendar-cell-state ($b-design-grey-calendar-card-table-cell-current-background,
            $calendar-card-table-cell-current-color,
            $b-design-grey-calendar-card-table-cell-current-border-color);

          &:hover {
            @include calendar-cell-state ($b-design-grey-calendar-fullscreen-table-cell-hover-background,
              $calendar-card-table-cell-current-color,
              $b-design-grey-calendar-fullscreen-table-cell-hover-border-color);
          }
        }
      }
    }
  }

  #{$calendar-prefix}-card,
  #{$calendar-prefix}-panel,
  #{$calendar-prefix}-range {

    #{$calendar-prefix} {


      &-cell {
        &.#{$css-prefix}selected {

          #{$calendar-prefix}-date,
          #{$calendar-prefix}-month,
          #{$calendar-prefix}-year {
            animation: cellZoomIn .4s cubic-bezier(.23, 1, .32, 1);
            font-weight: $calendar-card-table-cell-select-font-weight;

            @include calendar-cell-state ($calendar-card-table-cell-select-background,
              $calendar-card-table-cell-select-color,
              $calendar-card-table-cell-select-border-color);
          }
        }

        &.#{$css-prefix}disabled {

          #{$calendar-prefix}-date,
          #{$calendar-prefix}-month,
          #{$calendar-prefix}-year {
            cursor: not-allowed;

            @include calendar-cell-state ($b-design-grey-calendar-fullscreen-table-cell-disabled-background,
              $b-design-grey-calendar-fullscreen-table-cell-disabled-color,
              $b-design-grey-calendar-fullscreen-table-cell-disabled-border-color);
          }
        }

        &.#{$css-prefix}inrange {
          #{$calendar-prefix}-date {
            @include calendar-cell-state ($calendar-card-table-cell-inrange-background,
              $calendar-card-table-cell-inrange-color,
              $calendar-card-table-cell-inrange-border-color);
          }
        }
      }

      &-date,
      &-month,
      &-year {
        text-align: center;
        border: $line-1 $line-solid;

        &:hover {
          cursor: pointer;
        }

        @include calendar-cell-state ($b-design-grey-calendar-fullscreen-table-cell-normal-background,
          $calendar-fullscreen-table-cell-normal-color,
          $b-design-grey-calendar-fullscreen-table-cell-normal-border-color);

        &:hover {
          @include calendar-cell-state ($b-design-grey-calendar-fullscreen-table-cell-hover-background,
            $b-design-grey-calendar-fullscreen-table-cell-hover-color,
            $b-design-grey-calendar-fullscreen-table-cell-hover-border-color);
        }
      }

      &-cell-prev-month {
        #{$calendar-prefix}-date {
          @include calendar-cell-state ($b-design-grey-calendar-fullscreen-table-cell-other-background,
            $b-design-grey-calendar-fullscreen-table-cell-other-color,
            $b-design-grey-calendar-fullscreen-table-cell-other-border-color);

          &:hover {
            @include calendar-cell-state ($b-design-grey-calendar-fullscreen-table-cell-hover-background,
              $b-design-grey-calendar-table-cell-other-hover-color,
              $b-design-grey-calendar-fullscreen-table-cell-hover-border-color);
          }
        }
      }

      &-cell-next-month {
        #{$calendar-prefix}-date {
          @include calendar-cell-state ($b-design-grey-calendar-fullscreen-table-cell-other-background,
            $b-design-grey-calendar-fullscreen-table-cell-other-color,
            $b-design-grey-calendar-fullscreen-table-cell-other-border-color);

          &:hover {
            @include calendar-cell-state ($b-design-grey-calendar-fullscreen-table-cell-hover-background,
              $b-design-grey-calendar-table-cell-other-hover-color,
              $b-design-grey-calendar-fullscreen-table-cell-hover-border-color);
          }
        }
      }

      &-cell-current {

        #{$calendar-prefix}-date,
        #{$calendar-prefix}-month,
        #{$calendar-prefix}-year {
          @include calendar-cell-state ($b-design-grey-calendar-card-table-cell-current-background,
            $calendar-card-table-cell-current-color,
            $b-design-grey-calendar-card-table-cell-current-border-color);

          &:hover {
            @include calendar-cell-state ($b-design-grey-calendar-fullscreen-table-cell-hover-background,
              $calendar-card-table-cell-current-color,
              $b-design-grey-calendar-fullscreen-table-cell-hover-border-color);
          }
        }


      }
    }
  }

  #{$calendar-prefix}-panel {
    &-header {
      background: $b-design-grey-calendar-panel-header-background;
    }
  }

  #{$calendar-prefix}-panel#{$calendar-prefix}-week {
    #{$calendar-prefix}-tbody {
      tr:hover {
        #{$calendar-prefix}-cell #{$calendar-prefix}-date {
          @include calendar-cell-state ($b-design-grey-calendar-fullscreen-table-cell-hover-background,
            $b-design-grey-calendar-fullscreen-table-cell-hover-color,
            $b-design-grey-calendar-fullscreen-table-cell-hover-border-color);
        }
      }
    }
  }
}