@charset "UTF-8";
@import "../../style/function-v2";

// 新设计规范，皮肤v2
// https://xshow.tencent.com/s/static/guide.html?file=8712#0-0

$blueSelectedLight: #e7f3fd;

.im-dp {
  &-calendar {
    width: 300px;
    height: auto;
    border: 1px solid $calendarBorder;
    box-shadow: 0 4px 8px 0 $calendarBoxShadow;
    border-radius: 3px;
    color: $textColor;
  }

  &-op {
    margin-top: 20px;
    font-weight: normal;

    &-icon {
      font-size: 26px;
      height: 26px;
      top: -3px;
    }
  }

  &-wtlist {
    margin: 10px 0 0 18px;
    padding-bottom: 4px;
  }

  &-wt {
    width: 38px;
    font-size: 12px;

    &--weekend {
      color: inherit;
    }
  }

  &-month {
    margin: 2px 0 0 18px;

    &-bg {
      display: none;
    }
  }

  &-week {
    height: 36px;
  }

  &-day {
    position: relative;
    width: 24px;
    height: 28px;
    line-height: 28px;
    margin: 4px 0;
    padding: 0 7px;
    font-size: 12px;
    z-index: 0;

    // 高亮日期
    &--highlight {
      &::after {
        content: "";
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 4px;
        height: 4px;
        background-color: $normalColor;
        border-radius: 50% 50%;
      }
    }

    // 选中样式，默认隐藏
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 24px;
      height: 24px;
      background-color: $normalColor;
      border-radius: 50% 50%;
      z-index: -1;
      display: none;
    }

    // 选中状态
    &.selected {
      background-color: transparent;

      &::before {
        display: block;
      }
    }

    // 对当日的特殊处理，主要是为了兼容/覆盖v1样式
    &.today {
      color: $normalColor;
      border: 0;
      box-sizing: content-box;
      line-height: 28px;

      // 被选中的
      &.selected {
        color: $white;
      }

      &.selected--range {
        color: inherit;
      }

      &.selected,
      &:hover,
      &.selected--range {
        line-height: 28px;
      }

      // 选取范围的第一个或者最后一个展示选中态
      &.selected--range {
        &--first,
        &--last {
          color: $white;
        }
      }
    }

    // hover态
    &:hover {
      color: $white;
      background-color: transparent;

      &::before {
        display: block;
        background-color: $normalColor;
      }
    }

    &.disabled {
      &::before {
        display: none;
      }
    }

    // 选取范围内
    &.selected--range {
      color: inherit;
      background-color: $blueSelectedLight;

      // 选取范围内不展示选中态
      &::before {
        display: none;
      }

      // 选取范围头尾两个元素展示选中态
      &--first,
      &--last {
        color: $white;

        &::before {
          background-color: $normalColor;
          display: block;
        }
      }

      // 选取范围第一个元素或者每行第一个元素修正圆弧样式
      &--first,
      &:first-of-type {
        margin-left: 5px;
        padding-left: 2px;
        border-radius: 50% 0 0 50%;

        &::before {
          transform: translate(calc(-50% - 3px), -50%);
        }
      }

      // 选取范围最后一个元素或者每行最后一个元素修正圆弧样式
      &--last,
      &:last-of-type {
        margin-right: 5px;
        padding-right: 2px;
        border-radius: 0 50% 50% 0;

        &::before {
          transform: translate(calc(-50% + 2px), -50%);
        }
      }

      // 选取范围第一个元素等同于最后一个元素时
      &.selected--range--first.selected--range--last {
        margin-left: 0;
        margin-right: 0;
        padding-left: 7px;
        padding-right: 7px;
        background-color: transparent;

        &::before {
          transform: translate(-50%, -50%);
        }
      }
    }

    // 选取范围内被选中的元素展示样式
    &.selected.selected--range {
      background-color: $blueSelectedLight;

      &:hover::before {
        display: block;
        background-color: $normalColor;
      }
    }
  }
}