@import './../theme/vars.scss';

$checkboxPrefixCls: #{$vender-prefix}-checkbox;
$checkboxGroupPrefixCls: #{$checkboxPrefixCls}-group;

// $checkbox-color: $primary-color;
// $checkbox-color-active: $primary-color-deep;
$checkbox-color: var(--primary-color);
$checkbox-color-active: $primary-color-deep;

.#{$checkboxPrefixCls} {
  position: relative;
  display: inline-block;
  min-height: 16px;
  padding-left: 16px;
  margin-bottom: 0;
  font-weight: normal;
  line-height: $checkbox-height;
  vertical-align: middle;
  cursor: pointer;
  // transition: all $animation-duration-base $ease-in;

  &:hover {
    color: $checkbox-color-active;

    .#{$checkboxPrefixCls}-status {
      &::before {
        border-color: $checkbox-color-active;
      }
    }
  }

  &:focus {
    outline: none;

    .#{$checkboxPrefixCls}-status {
      &::before {
        border-color: $checkbox-color;
      }
    }

    .#{$checkboxPrefixCls}-text {
      color: $checkbox-color;
    }
  }

  &-single {
    height: $checkbox-height;
  }
}

.#{$checkboxPrefixCls}-input {
  display: none;

  &:checked {
    + .#{$checkboxPrefixCls}-status {
      &::before {
        border-color: $checkbox-color-active;
      }

      &::after {
        display: block;
      }

      + .#{$checkboxPrefixCls}-text {
        color: $checkbox-color-active;
      }
    }
  }
}

.#{$checkboxPrefixCls}-status {
  pointer-events: none;

  &::before,
  &::after {
    position: absolute;
    border-radius: 2px;
    content: '';
    box-sizing: border-box;
    // transition: all $animation-duration-base $ease-in;
  }

  &::before {
    top: 50%;
    left: 0;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    font-size: 16px;
    background-color: white;
    border: 1px solid $checkbox-normal-border-color;
  }

  &::after {
    top: 50%;
    left: 5px;
    display: none;
    width: 6px;
    height: 10px;
    margin-top: -6px;
    border: 2px solid $checkbox-color-active;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
  }
}

.#{$checkboxPrefixCls}-text {
  margin-left: 7px;
  pointer-events: none;
}

.#{$checkboxPrefixCls}.#{$checkboxPrefixCls}-disabled {
  cursor: not-allowed;

  .#{$checkboxPrefixCls}-status {
    &::before,
    &::after {
      border-color: $checkbox-disable-border-color;
    }
  }

  .#{$checkboxPrefixCls}-text {
    color: $checkbox-disable-text-color;
  }

  &.#{$checkboxPrefixCls}-indeterminate {
    .#{$checkboxPrefixCls}-status {
      &::after {
        background-color: $checkbox-disable-bg;
      }
    }
  }
}

.#{$checkboxPrefixCls}-vertical {
  display: block;
}

.#{$checkboxPrefixCls}-indeterminate {
  .#{$checkboxPrefixCls}-status {
    &::before {
      border-color: $checkbox-color-active;
    }

    &::after {
      left: 3px;
      display: block;
      width: 10px;
      height: 10px;
      margin-top: -5px;
      background-color: $checkbox-color-active;
      border: 0;
      transform: none;
    }
  }

  .#{$checkboxPrefixCls}-text {
    color: $checkbox-color-active;
  }
}

// circle
.#{$checkboxPrefixCls}-circle .#{$checkboxPrefixCls}-status {
  &::before {
    border-radius: 50%;
  }
}

// inverse
.#{$checkboxPrefixCls}-inverse {
  .amos-checkbox-input:checked + .amos-checkbox-status {
    &::before {
      background-color: $checkbox-color-active;
    }

    &::after {
      border-color: white;
    }
  }
}

// group

.#{$checkboxGroupPrefixCls} {
  .#{$checkboxPrefixCls} {
    margin-right: 20px;
  }

  .#{$checkboxPrefixCls}-vertical {
    margin-right: 0;
  }
}

// EvolutionGroup

$egPrefixCls: evolution-group;

.#{$egPrefixCls} {
  display: inline-block;
  border-radius: $border-radius-base;

  &-label {
    display: inline-block;
    padding: 6px;
    padding-left: 0;
  }

  &-item {
    display: inline-block;
    padding: 6px;
    cursor: pointer;
    background: $minor-bg-color;
    border: 1px solid $border-color-base;

    &:hover,
    &.#{$egPrefixCls}-item-active {
      color: white;
      background: var(--primary-3);
    }

    + .#{$egPrefixCls}-item {
      border-left: none;
    }
  }

  &.#{$egPrefixCls}-vertical {
    .#{$egPrefixCls}-label {
      display: block;
    }

    .#{$egPrefixCls}-item {
      display: block;

      + .#{$egPrefixCls}-item {
        border-top: none;
        border-left: 1px solid $border-color-base;
      }
    }
  }

  &.#{$egPrefixCls}-noncheckable {
    .#{$egPrefixCls}-item {
      transition: background 0.1s;

      &:hover {
        color: inherit;
        background-color: $minor-bg-color-hover;
      }

      &:active {
        color: inherit;
        background-color: $minor-bg-color-active;
      }
    }
  }
}