@import "../../../index.less";

.bi-checkbox {
  & .checkbox-content, &.checkbox-content {
    .border-radius(2px);
    border: 1px solid @color-bi-border-checkbox;
    .box-sizing(border-box);
    .transition(all .1s);

    &:after {
      position: absolute;
      display: table;
      top: 45%;
      left: 18%;
      border: 2px solid transparent;
      border: calc(var(--css-scale, 1) * 2px) solid transparent;
      border-top: 0;
      border-left: 0;
      width: 50%;
      height: 75%;
      .box-sizing(border-box);
      .transform(rotate(45deg) scale(1) translate(-50%, -50%));
      @transition: all .1s cubic-bezier(.71, -.46, .88, .6), opacity .1s;
      .transition(@transition);
      content: '';
    }
    &.hover, &:hover {
      border-color: @color-bi-border-hover-active-checkbox;
    }
  }
  &.active {
    & .checkbox-content, &.checkbox-content{
      border-color: @color-bi-border-hover-active-checkbox;
      background-color: @color-bi-background-active-checkbox;
      &:after {
        border-color: @color-bi-background-active-checkbox-content;
        opacity: 1;
      }
    }
  }
  &.disabled {
    & .checkbox-content, &.checkbox-content {
      background-color: @color-bi-background-disabled-checkbox;
      border-color: @color-bi-border-disabled-checkbox;
    }
    & .checkbox-content:after, &.checkbox-content:after {
      opacity: 0;
    }
    &.active {
      & .checkbox-content, &.checkbox-content {
        background-color: @color-bi-background-disabled-active-checkbox;
        &:after {
          opacity: 1;
          border-color: @color-bi-background-disabled-active-checkbox-content;
        }
      }
    }
  }
}

.bi-theme-dark {
  .bi-checkbox {
    & .checkbox-content, &.checkbox-content {
      border-color: @color-bi-border-checkbox-theme-dark;
      &.hover, &:hover {
        border-color: @color-bi-border-hover-active-checkbox-theme-dark;
      }
    }
    &.active {
      & .checkbox-content, &.checkbox-content {
        border-color: @color-bi-border-hover-active-checkbox-theme-dark;
        background-color: @color-bi-background-active-checkbox-theme-dark;
        &:after {
          border-color: @color-bi-background-active-checkbox-content-theme-dark;
        }
      }
    }
    &.disabled {
      & .checkbox-content, &.checkbox-content {
        background-color: @color-bi-background-disabled-checkbox-theme-dark;
      }
      &.active {
        & .checkbox-content, &.checkbox-content {
          background-color: @color-bi-background-disabled-active-checkbox-theme-dark;
          border-color: @color-bi-border-disabled-checkbox-theme-dark;
          &:after {
            border-color: @color-bi-background-disabled-active-checkbox-content-theme-dark;
          }
        }
      }
    }
  }
}