// @import '../_utils.scss';
// @import './calendar.scss';
// @import './button.scss';
// @import './icon.scss';

.#{$schedule-prefix-cls} {
  position: relative;

  &-header {
    @include theme-color($__schedule-header_font-color);
    position: relative;
    text-align: center;
    height: 36px;
    .#{$btn-prefix-cls}-group, .#{$schedule-prefix-cls}-today-btn {
      position: absolute;
      top: 1px;
    }
    .#{$schedule-prefix-cls}-today-btn {
      margin-left: $schedule-today-btn-margin-left;
      right: $schedule-today-btn-right;
      height: $schedule-today-btn-height;
    }
    .#{$btn-prefix-cls}-group {
      left: $schedule-header-button-group-left;
    }
    .#{$btn-prefix-cls}-group button {
      width: $schedule-header-button-group-width;
      padding-left: $schedule-header-button-group-padding-left;
      padding-right: $schedule-header-button-group-padding-right;
      height: $schedule-header-button-group-height;
    }
    .#{$schedule-prefix-cls}-date-text {
      display: inline-block;
      /* #197595 由于用户场景问题，原先h1标签会导致hui-pro框架上h1新增margin等样式，导致日期的排版错位，导致h-schedule-header样式的高度计算错误，
      从而导致.h-schedule-events类的top:136px 计算错误。 为了再次由于pro项目样式覆盖导致h-schedule-header的高度计算错误，设置h-schedule-header中
      height: 36px; 将h1标签改为span标签，样式font-size: 24px; font-weight: 600;
       */
      font-size: 24px;
      font-weight: 600;
    }
  }

  &-events {
    position: absolute;
    top: $schedule-events-top;
    left: $schedule-events-left;
    z-index: $zindex-spin;
    width: $schedule-events-width;
    margin: $schedule-events-margin;
    border-left: 1px solid transparent;
    pointer-events: none;
    display: flex;
    flex-wrap: wrap;
    .#{$schedule-prefix-cls}-event-wrapper {
      width: $schedule-event-wrapper-width;
      height: $schedule-event-wrapper-height;
      // margin-top: $schedule-event-wrapper-margin-top; //修改仅在第一行需要添加margin-top
      // position: relative;
      &:nth-child(7n + 1) {
        padding-left: 1px;
      }

      &:nth-child(7n) {
        padding-right: 2px;
      }
      .#{$schedule-prefix-cls}-event-content {
        pointer-events: auto;
        height: $schedule-event-content-height;
        margin-bottom: $schedule-event-content-margin-bottom;
        // padding-left:$schedule-event-content-padding-left;
        font-size: $schedule-event-content-font-size;
        line-height: $schedule-event-content-height;
        color: $schedule-event-content-color;
        @include theme-color($__schedule-event_font-color);
        background: $schedule-event-content-background;
        @include theme-background-color($__schedule-event_background-color);
        cursor: pointer;
        display: flex;
        align-items: center;
        &.#{$schedule-prefix-cls}-event-placeholder {
          opacity: 0;
          pointer-events: none;
        }

        &.event-place-start {
          margin-left: $schedule-event-place-start-margin-left;
          border-radius: $schedule-event-place-start-border-radius;
        }

        &.event-place-end {
          margin-right: $schedule-event-place-start-margin-right;
          border-radius: $schedule-event-place-start-border-radius;
        }

        &.event-place-start.event-place-end {
          border-radius: 3px;
        }

        .event-item-text {
          padding-left: $schedule-event-content-padding-left;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          flex: 1;
          display: inline-block; // 兼容ie10，flex; 溢出省略号失效
        }

        .event-item-circle {
          margin-left: 10px;
          display: inline-block;
          width: 5px;
          height: 5px;
          border-radius: 50%;
        }
      }
      .#{$schedule-prefix-cls}-event-more {
        text-align: center;

        i {
          display: inline-block;
          pointer-events: auto;
          width: 18px;
          color: rgba(#000, 0.6);
          @include theme-color($__schedule-event-more_icon-color);
          transition: color 0.2s;
          cursor: pointer;
          line-height: 16px;

          &:hover {
            color: #000;
            @include theme-color($__schedule-event-more_hover_icon-color);
          }
        }
      }

      .event-circle-remind {
        position: relative;
        width: 100%;
        height: 100%;

        &::before {
          content: "\25CF";
          position: absolute;
          bottom: 2px;
          right: 4px;
          color: #f5222d;
          @include theme-color($__schedule-event-circle-remind_font-color);
          line-height: 1;
          font-size: 14px;
        }
      }
    }
    .#{$schedule-prefix-cls}-event-wrapper.first-line {
      padding-top: $schedule-event-wrapper-margin-top;
      // margin-top: $schedule-event-wrapper-margin-top;
    }
    /* 展示更多活动的窗口 */
    .#{$schedule-prefix-cls}-popover {
      position: absolute;
      z-index: $zindex-affix;
      width: 14.28%;
      min-width: $schedule-popover-min-width;
      background: $schedule-popover-background;
      @include theme-background-color($__schedule-popover_background-color);
      box-shadow: $schedule-popover-box-shadow;
      @include theme-box-shadow($__schedule-popover_box-shadow);
      color: $schedule-popover-color;
      @include theme-color($__schedule-popover_font-color);
      pointer-events: auto;

      &-header {
        line-height: 1.5;
        padding: $schedule-popover-header-padding;
        background: $schedule-popover-header-background;
        @include theme-background-color($__schedule-popover-header_background-color);
        font-size: $schedule-popover-header-font-size;
        @include theme-border-bottom($__schedule-popover-header_border-bottom);

        i.icon-close {
          display: inline-block;
          float: right;
          cursor: pointer;
        }
      }

      &-body {
        padding: $schedule-popover-body-padding;
        max-height: $schedule-popover-body-max-height;
        overflow: auto;

        &-item {
          background: $schedule-popover-body-item-background;
          @include theme-background-color($__schedule-popover-item_background-color);
          color: $schedule-popover-body-item-color;
          @include theme-color($__schedule-popover-item_font-color);
          margin-bottom: $schedule-popover-body-item-margin-bottom;
          border-radius: $schedule-popover-body-item-border-radius;
          padding: $schedule-popover-body-item-padding;
          display: flex;
          align-items: center;
          // text-overflow: ellipsis;
          // white-space: nowrap;
          // overflow: hidden;
          cursor: pointer;

          &:last-child {
            margin-bottom: 10px;
          }

          .event-item-text {
            padding-left: $schedule-event-content-padding-left;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            flex: 1;
          }
          // #224783 events属性中国对象新增 color属性，用户若配置该属性，代表当前事件显示事件提醒圆点，color传递的值必须是代表颜色的字符串，表单提醒圆点的颜色
          .event-item-circle {
            margin-left: 10px;
            display: inline-block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
          }
        }
      }
    }
  }
  .#{$calendar-prefix-cls}-today {
    &::before {
      content: "●";
      position: absolute;
      top: $schedule-calendar-today-top;
      left: $schedule-calendar-today-left;
      color: $schedule-calendar-today-color;
      @include theme-color($__schedule-event-circle-today_font-color);
      line-height: 1;
      font-size: $schedule-calendar-today-font-size;
    }
  }
  .#{$calendar-prefix-cls}-month-content .#{$calendar-prefix-cls}-month-content-item {
    cursor: default;
    .#{$calendar-prefix-cls}-month-content-item-text {
      position: absolute;
      line-height: 1;
      top: $schedule-calendar-month-content-item-top;
      right: $schedule-calendar-month-content-item-right;
    }
  }
}
// .#{$schedule-prefix-cls} {
//   .h-calendar-month {
//     // margin: 10px 1.5%;
//   }
// }