@import "../common/variables";
@import '../common/vars';

@disabled-color: #eff2f7;

.@{css-prefix} {
  &-checkbox-inner {
    margin-left: 12rpx;
    margin-right: 12rpx;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 40rpx;
    height: 40rpx;
    border: 2rpx solid #c0ccda;
    border-radius: 6rpx;
    background-color: #fff;
    z-index: 1;
    transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
    -webkit-backface-visibility: hidden;

    &.is-disabled {
      background-color: @disabled-color;
      border-color: #D3DCE6;

      &.is-checked {
        background-color: #D3DCE6;
        border-color: #D3DCE6;

        .@{css-prefix}-checkbox__check {
          border-color: #fff;
        }

        &.@{css-prefix}-checkbox-inner__plain {
          .@{css-prefix}-checkbox__check {
            border-color: @disabled-color;
          }
        }
      }
    }

    &.is-checked {
      background-color: @theme-color;
      border-color: @theme-color;

      .@{css-prefix}-checkbox__check {
        border-color: #fff;
        transform: rotate(45deg) scaleY(1);
      }

      &.@{css-prefix}-checkbox-inner__plain {
        background-color: transparent;
      }
    }

    &.@{css-prefix}-checkbox-inner__circle {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
    }

    &.@{css-prefix}-checkbox-inner__plain {
      border: 0;
      background-color: transparent;

      &.is-checked {
        .@{css-prefix}-checkbox__check {
          border-color: @theme-color;
        }
      }
    }
  }

  &-checkbox__check {
    box-sizing: content-box;
    position: absolute;
    top: 4rpx;
    left: 12rpx;
    content: "";
    height: 16rpx;
    width: 8rpx;
    border: 4rpx solid #fff;
    border-left: 0;
    border-top: 0;
    transform: rotate(45deg) scaleY(0);
    transition: transform 0.15s cubic-bezier(0.71, -0.46, 0.88, 0.6) 0.05s;
    transform-origin: center;
    -webkit-backface-visibility: hidden;
  }

  &-checkbox-inner__circle {
    .@{css-prefix}-checkbox__check {
      top: 6rpx;
      left: 14rpx;
      height: 14rpx;
      width: 6rpx;
    }
  }

  &-checkbox-inner__plain {
    .@{css-prefix}-checkbox__check {
      height: 24rpx;
      width: 12rpx;
      transition: transform 0.15s;
    }
  }

  &-checkbox {
    position: relative;
    display: inline-block;
    cursor: pointer;
    white-space: nowrap;
    outline: none;
    line-height: 1;
    vertical-align: middle;

    input[type='checkbox'] {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }
  }
}