@use "@befe/brick-style/src/themes/date-picker";
@use "@befe/brick-style/src/themes/base";
@use "base" as *;

// 范围内的间隔样式
.inside-range {
  background-color: $color-bg-item-inside-range;
}

// 单一内容项样式
.brick-content-item {

  span {
    display: inline-block;
    position: relative;
    z-index: 20;

    width: 100%;
    height: 100%;

    color: date-picker.$date-picker-cell-font-color;
    border-radius: date-picker.$date-picker-cell-border-radius-s;
  }

  &:hover {
    cursor: pointer;
  }

  &[data-action-status="hover"] span {
    background-color: date-picker.$date-picker-cell-bg-color-hover;
  }

  &[data-action-status="active"] span {
    background-color: date-picker.$date-picker-cell-bg-color-active;
  }

  // 本样式组为了适配 hi 中的 "圆形" 选择样式 (同时存在两个 "背景色" 叠加的情况)
  &[data-range-type="start"],
  &[data-range-type="end"] {
    position: relative;

    &:after {
      content: ' ';
      display: inline-block;

      position: absolute;
      z-index: 10;

      width: 50%;
      height: 100%;
      left: 50%;

      // @todo
      background-color: $color-bg-item-inside-range;
    }
  }

  &[data-range-type="end"]:after {
    left: 0;
  }

  &[data-selected="true"],
  &[data-range-type="start"],
  &[data-range-type="end"],
  &[data-range-type="single"] {
    span {
      background-color: date-picker.$date-picker-cell-bg-color-selected;
      color: date-picker.$date-picker-cell-font-color-selected;
    }

    &[data-action-status="hover"] span {
      background-color: date-picker.$date-picker-cell-bg-color-selected-hover;
    }

    &[data-action-status="active"] span {
      background-color: date-picker.$date-picker-cell-bg-color-selected-active;
    }

    &[data-disabled="true"] span {
      @include datePickerItemDisabled(
          date-picker.$date-picker-cell-bg-color-disabled,
          date-picker.$date-picker-cell-font-color-disabled
      )
    }
  }

  &[data-disabled="true"] {
    span {
      @include datePickerItemDisabled(
          date-picker.$date-picker-cell-bg-color-disabled,
          date-picker.$date-picker-cell-font-color-disabled
      );
    }

    &[data-selected="true"],
    &[data-range-type="start"],
    &[data-range-type="end"],
    &[data-range-type="single"] {
      span {
        background-color: date-picker.$date-picker-cell-bg-color-selected;
      }
    }
  }

  &[data-range-type="start"] span {
    border-radius: date-picker.$date-picker-cell-border-radius-range-start;
  }

  &[data-range-type="end"] span {
    border-radius: date-picker.$date-picker-cell-border-radius-range-end;
  }

  &[data-range-type="inside"] {
    span {
      background-color: $color-bg-item-inside-range;
      border-radius: 0;
    }

    &[data-action-status="hover"] span {
      //position: relative;

      // @todo:pending
      //&:before {
      //  content: ' ';
      //  display: block;
      //  position: absolute;
      //
      //  background-color: $color-bg-item-inside-range;
      //
      //  top: 0;
      //  left: 0;
      //  width: 100%;
      //  height: 100%;
      //}

      //.brick-item-text {
      //  display: block;
      color: date-picker.$date-picker-cell-bg-color-selected;
      //background-color: $color-bg-highlight-normal;
      //border-radius: $border-radius-medium;
      //}
    }
  }

  // 清除所有的 "本月的样式"
  &[data-outside="true"] {
    span {
      background-color: transparent;
      color: date-picker.$date-picker-cell-font-color-outside;
    }

    &[data-range-type] {
      span {
        background-color: transparent;
      }

      &:after {
        background-color: transparent;
      }
    }
  }

  // 今天 : 有个小点点
  &[data-today="true"] {
    position: relative;

    // today 的文本元素
    span {
      color: date-picker.$date-picker-today-text-normal;
    }

    // 这个小点点
    span:after {
      display: block;
      text-align: center;

      position: absolute;

      content: ' ';
      border-radius: 100%;
      background-color: date-picker.$date-picker-today-indicator-color-normal;

      width: 4px;
      height: base.height(1);

      left: calc(50% - 2px);
      margin-top: base.padding(-2);
    }

    // today 的选中状态
    &[data-selected="true"],
    &[data-range-type="start"],
    &[data-range-type="end"],
    &[data-range-type="single"] {
      span {
        color: date-picker.$date-picker-today-text-selected;
      }

      span:after {
        background-color: date-picker.$date-picker-today-indicator-color-selected;
      }

      // @note: @todo: 这块有点问题... today + selected + disabled 状态
      &[data-disabled="true"] {
        span:after {
          background-color: date-picker.$date-picker-today-indicator-color-selected-disabled;
        }
      }
    }

    &[data-range-type="inside"] {
      span:after {
        background-color: date-picker.$date-picker-today-indicator-color-selected-inside;
      }
    }

    &[data-disabled="true"] span {
      color: date-picker.$date-picker-today-text-disabled;

      &:after {
        background-color: date-picker.$date-picker-today-indicator-color-disabled;
      }
    }

    &[data-outside="true"] {
      span {
        color: date-picker.$date-picker-today-text-color-outside-month;
      }

      span:after {
        background-color: date-picker.$date-picker-today-indicator-color-outside-month;
      }
    }
  }
}