// 日历组件
.cts-date-record {
  background-color: $color-white;

  .status2_ {
    background-color: $color-btn;
  }

  .status3_ {
    background-color: $color-green;
  }

  .status4_ {
    background-color: $color-danger;
  }

  .recordwork-week {
    height: 88px;
    display: flex;
    align-items: center;
    text-align: center;
    color: $color-font-sub;
    border-bottom: 1px solid $border-color;

    text {
      flex: 1;
    }
  }

  .recordwork-day {
    display: flex;
    flex-wrap: wrap;

    .recordwork-day-item {
      box-sizing: border-box;
      height: 126px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      width: (100% / 7);
      text-align: center;
      position: relative;
      border: 4px solid transparent;

      >view {
        box-sizing: border-box;
      }

      // 超出范围
      &.status1 {
        background-color: $color-bg;
        color: $color-font-sub1;
      }

      // 正常出勤 - 已记工
      &.status2 {
        background-color: #EFFCEB;
      }

      // 休息 - 休息
      &.status3 {
        background-color: #EFFCEB;
      }

      // 缺勤 - 未记工
      &.status4 {
        background-color: #FFF0F0;
      }

      // 今天状态，记工才有，考勤没有
      &.status5 {
        border: 4px solid $color-font-sub1;
      }

      // 选中，记工才有，考勤没有
      &.status6 {
        border: 4px solid $theme;
      }

      // 下面字体定位
      .statusPos {
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 100%;
        text-align: center;
      }

      .status-tip {
        position: absolute;
        top: 0;
        left: 0;
        width: 34px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        font-size: $font-size-24;
        color: $color-white;

        &.tip1 {
          background-color: $color-danger;
        }

        &.tip2 {
          background-color: $color-green;
        }
      }

      .recordwork-value {
        // font-weight: bold;
      }

      .text {
        .text1 {
          font-size: $font-size-20;
          color: $color-green;
        }

        .text2 {
          font-size: $font-size-20;
          color: $color-danger;
        }
      }
    }

    // 打卡考勤样式
    &.checking-day {
      .recordwork-day-item {

        // 正常
        &.status0 {
          background-color: $color-white;
        }

        // 异常（迟到，早退，缺卡）
        &.status2 {
          background-color: $color-white;
        }

        // 未打卡
        &.status4 {
          background-color: $color-white;
        }

        // 选中
        &.status6 {
          border: 4px solid $theme;
        }

        .checking-status-show {
          width: 12px;
          height: 12px;
          background-color: $color-btn;
          border-radius: 50%;
          margin: 6px auto 0 auto;

          &.warning {
            background-color: $color-danger;
          }
        }
      }
    }
  }

  .recordwork-note {
    @include padding-style();
    display: flex;
    align-items: center;
    height: 88px;
    border-top: 1px solid $border-color;

    >view {
      display: flex;
      align-items: center;
      margin-right: 30px;

      .status {
        width: 10px;
        height: 10px;
        display: inline-block;
        border-radius: 50%;
      }

      .status-note {
        margin-left: 8px;
      }
    }
  }
}