// @import '../_utils.scss';
// @import './badge.scss';

.#{$calendar-prefix-cls} {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  &-top-change &-top-icon,
  &-top-change &-top-text {
    display: inline-block;
    vertical-align: middle;
    font-size: $calendar-top-text-font-size;
  }
  &-top-change &-top-text {
    @include theme-color($__calendar-top-text_font-color);
  }

  &-top-icon {
    cursor: pointer;
    @include theme-color($__calendar-top-icon_icon-color);

    &:hover {
      background-color: $background-color-base;
      @include theme-background-color($__calendar-top-icon_hover_background-color);
      @include theme-color($__calendar-top-icon_hover_icon-color);
    }

    &.h-prev-year {
      margin-right: $calendar-prev-year-margin-right;
    }

    &.h-next-year {
      margin-left: $calendar-next-year-margin-left;
    }
  }

  &-top-change {
    height: $calendar-top-change-height;
    line-height: $calendar-top-change-line-height;
    text-align: center;
    position: relative;
  }


  &-month-content {
    display: flex;
    flex-wrap: wrap;
  }

  &-month-content.#{$calendar-prefix-cls}-month-week &-month-content-item-tag,
  &-month-content.#{$calendar-prefix-cls}-month-week &-month-content-item {
    color: $calendar-month-content-color;
    @include theme-color($__schedule-month-week-item_font-color);
    font-size: $calendar-month-content-font-size;
    background: $calendar-month-content-background;
    @include theme-background-color($__schedule-month-week-item_background-color);
    border-color: $calendar-month-content-border-color;
    @include theme-border-color($__schedule-month-week-item_border-color);
  }

  &-month-content-item {
    // 日历控件中为了鼠标划选
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: $calendar-month-content-item-font-size;
    width: 14.28%;
    height: $calendar-month-content-item-height;
    text-align: center;
    color: $calendar-month-content-item-color;
    @include theme-color($__calendar-month-item_font-color);
    position: relative;
    line-height: $calendar-month-content-item-height;
    padding: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border:2px solid #fff; */
    border: $calendar-month-content-item-boder;
    @include theme-border-color($__calendar-month-item_border-color);
    border-width: $calendar-month-content-item-border-width;
    .h-badge {
      width: 0;
      height: 0;

      .h-badge-count {
        top: -25px;
        right: -20px;
      }
    }
  }

  &-month-content-item:nth-child(7n + 1) {
    border-width: $calendar-month-content-item-nth-child-border-width;
  }

  &-month-week {
    background: $calendar-month-content-background;
    @include theme-background-color($__calendar-month-week_background-color);
  }
  &-month-week &-month-content-item {
    border-width: $calendar-month-header-border-width;
    border-top-width: 1px;
  }
  &-month-content.#{$calendar-prefix-cls}-month-day &-month-content-item {
    cursor: pointer;
    background: $calendar-month-content-item-bg;
    @include theme-background-color($__calendar-month-item_background-color);
    @include theme-border-top($__calendar-month-item_border-top);
    &:hover{
      @include theme-background-color($__calendar-month-item_hover_background-color);
      @include theme-border-top($__calendar-month-item_hover_border-top);
    }
  }
  &-month-content.#{$calendar-prefix-cls}-month-day &-month-content-item.#{$calendar-prefix-cls}-month-item-empty {
    background: none;
    @include theme-background-color($__calendar-month-item_empty_background-color);
    &:hover{
      @include theme-background-color($__calendar-month-item_empty_background-color);
      @include theme-border-top($__calendar-month-item_border-top);
    }
  }
  &-month-content-item.#{$calendar-prefix-cls}-month-item-disable {
    background: $input-disabled-bg !important;
    @include theme-background-color($__calendar-month-item_disable_background-color, $--important);
    color: $btn-disable-color;
    @include theme-color($__calendar-month-item_disable_font-color);
  }
  &-month-content-item.#{$calendar-prefix-cls}-month-item-disable.#{$calendar-prefix-cls}-month-day-active {
    background: $calendar-month-day-selected-background !important;
    @include theme-background-color($__calendar-month-item_disable-active_background-color, $--important);
    opacity: 0.6;
    @include theme-opacity($__calendar-month-item_disable-active_opacity);
  }
  &-month-content.#{$calendar-prefix-cls}-month-day &-month-content-item.#{$calendar-prefix-cls}-month-restDay {
    color: $calendar-month-restDay-color;
    @include theme-color($__calendar-month-item_rest_font-color);
    background: none;
    @include theme-background-color($__calendar-month-item_rest_background-color);
    &:hover{
      @include theme-background-color($__calendar-month-item_hover_background-color);
      @include theme-border-top($__calendar-month-item_hover_border-top);
    }
  }
  &-month-content.#{$calendar-prefix-cls}-month-day &-month-content-item.#{$calendar-prefix-cls}-month-day-active {
    background: $calendar-month-day-selected-background;
    @include theme-background-color($__calendar-month-item_active_background-color);
    border-radius: 2px;
    color: $calendar-month-day-active-color;
    @include theme-color($__calendar-month-item_active_font-color);
    @include theme-border-top($__calendar-month-item_active_border-top);
    &:hover{
      @include theme-background-color($__calendar-month-item_active_background-color);
      @include theme-border-top($__calendar-month-item_active_border-top);
    }
  }
  &-month-content.#{$calendar-prefix-cls}-month-day {
    border: 0;
  }

  &-month {
    width: 22%;
    max-width: $calendar-month-max-width;
    margin: 1.5%;
    float: left;
    flex: 0 0 auto;
    border-radius: 2px;

    // height: 330px;
    & > div {
      box-shadow: $calendar-month-div-box-shadow;
      @include theme-box-shadow($__calendar-month_box-shadow);
      @include theme-border($__calendar-month_border);
    }
  }

  &-month-title {
    display: block;
    font-size: $calendar-month-title-font-size;
    height: $calendar-month-title-height;
    line-height: $calendar-month-title-line-height;
    text-align: center;
    background: $calendar-month-content-background;
    @include theme-background-color($__calendar-month-title_background-color);
    @include theme-color($__calendar-month-title_font-color);
    border-radius: $calendar-month-title-border-radius;
  }

  &-wrapper {
    position: relative;
  }

  &-context-menu {
    display: none;
    position: absolute;
  }

  &-handle {
    width: $calendar-handle-width;
    height: $calendar-handle-height;
    padding: $calendar-handle-padding;
    text-align: center;
    background-color: $calendar-handle-background-color;
    @include theme-background-color($__calendar-handle_background-color);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 4px;
    box-shadow: $calendar-handle-box-shadow;
    @include theme-box-shadow($__calendar-menu_box-shadow);
    -webkit-box-shadow: $calendar-handle-box-shadow;
    border: $calendar-handle-border;
    @include theme-border-color($__calendar-handle_border-color);
    @include theme-color($__calendar-handle_font-color);
  }

  &-handle &-handle-item {
    display: block;
    height: $calendar-handle-item-height;
    line-height: $calendar-handle-item-height;
    outline: none;
    list-style: none;
    font-size: $calendar-handle-item-font-size;
    cursor: pointer;
  }
  &-handle &-handle-item.#{$calendar-prefix-cls}-handle-setWorkDay {
    border-bottom: $calendar-handle-border;
    @include theme-border-bottom-color($__calendar-handle-item-setWorkDay_border-color);
  }

  &-handle &-handle-item:hover {
    background: $calendar-handle-item-hover-background;
    @include theme-background-color($__calendar-handle_hover_background-color);
    color: $calendar-handle-item-hover-color;
    @include theme-color($__calendar-handle_hover_font-color);
  }

  ::selection {
    background: transparent;
    opacity: 0.1;
  }

  ::-moz-selection {
    background: transparent;
  }
  //::-webkit-selection {
  //  background:#DDDDDE;
  //}
}