/**
 *
 * This file may have been modified by Bytedance Inc. (“Bytedance Inc.'s Modifications”). 
 * All Bytedance Inc.'s Modifications are Copyright (year) Bytedance Inc..  
 * 
 * This source code is licensed under the Apache license.
 * See LICENSE file in the project root for license information.
 *
 */
@import '../../../styles/variables.less';
@import '../../../styles/mixins.less';

@import './mixins.less';

@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox';

.@{checkbox-prefix-cls}-wrapper:not(.sp-null) {
  color: @checkbox-text-color;

  .@{checkbox-prefix-cls} {
    // 修改 focus 状态
    .@{checkbox-prefix-cls}-input:focus + .@{checkbox-prefix-cls}-inner {
      border-color: @border-color-base;
    }
    .@{checkbox-prefix-cls}-input:hover + .@{checkbox-prefix-cls}-inner {
      border-color: @checkbox-color;
    }
    .@{checkbox-prefix-cls}-wrapper:hover &-inner,
    &:hover &-inner {
      border-color: @checkbox-color;
    }
    &-disabled {
      .@{checkbox-prefix-cls}-inner {
        background-color: @checkbox-disabled-bg;
      }
    }
    // 选中后的状态
    &-checked {
      .@{checkbox-prefix-cls}-input:hover + .@{checkbox-prefix-cls}-inner {
        background-color: @checkbox-checked-hover-bg;
        border-color: @checkbox-checked-hover-border-color;
      }

      &::after {
        border-radius: @checkbox-border-radius;
        display: none;
      }
      & .@{checkbox-prefix-cls}-input:focus + .@{checkbox-prefix-cls}-inner {
        border-color: @checkbox-color;
      }
    }
    &-inner {
      border-radius: @checkbox-border-radius;
      &::after {
        display: none !important;
      }
    }
  }
  // 修改选中后的✅
  .@{checkbox-prefix-cls}-checked:not(.@{checkbox-prefix-cls}-indeterminate) {
    .@{checkbox-prefix-cls}-inner {
      &::before {
        content: ' ';
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 12px;
        height: 8px;
        transform: translate(-50%, -50%);
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.99 7.467a.759.759 0 00.596.289.748.748 0 00.596-.29l5.94-5.94a.75.75 0 00-1.06-1.06L4.586 5.94 1.938 3.294a.75.75 0 00-1.06 1.06L3.99 7.467z' fill='%23fff'/%3E%3C/svg%3E");
        background-position: center center;
        background-repeat: no-repeat;
      }
    }
  }
  // 半选的状态
  .@{checkbox-prefix-cls}-indeterminate {
    &,
    &.@{checkbox-prefix-cls}-disabled {
      .@{checkbox-prefix-cls}-inner {
        background-color: @checkbox-color;
        border-color: @checkbox-color;
        &::after {
          display: block !important;
          top: 50%;
          left: 50%;
          width: 10px;
          height: 2px;
          background-color: #fff;
          border: 0;
          border-radius: 1px;
          transform: translate(-50%, -50%) scale(1);
          opacity: 1;
          content: ' ';
        }
      }
    }
  }
  // disabled 状态
  .@{checkbox-prefix-cls}-disabled {
    & + span {
      color: @checkbox-disabled-text-color;
    }
    &.@{checkbox-prefix-cls}-indeterminate,
    &.@{checkbox-prefix-cls}-checked:not(.sp-null) {
      .@{checkbox-prefix-cls}-inner {
        background-color: @checkbox-checked-disabled-bg;
        border-color: @checkbox-checked-disabled-border-color !important;
        opacity: @checkbox-checked-disabled-opacity;
      }
    }
  }
}

// 小尺寸
.@{checkbox-prefix-cls}-group.sp-checkbox-group-sm .@{checkbox-prefix-cls}-wrapper,
.@{checkbox-prefix-cls}-wrapper.sp-checkbox-sm {
  font-size: @font-size-sm;
  line-height: 16px;
  .@{checkbox-prefix-cls}-inner:not(.sp-null) {
    width: 14px;
    height: 14px;
    &::after {
      width: 8px;
    }
  }
  .@{checkbox-prefix-cls}-checked:not(.@{checkbox-prefix-cls}-indeterminate) {
    .@{checkbox-prefix-cls}-inner::before {
      width: 10px;
      background-size: cover;
      height: 6px;
    }
  }
}