$name: 'ivue-checkbox';

:root {
  --#{$name}-font-size: 14px;
  --#{$name}-right: 8px;
  --#{$name}-text-padding-left: 4px;

  // 方框
  --#{$name}-inner-size: 16px;
  --#{$name}-inner-radius: 2px;

  // 选中效果
  --#{$name}-inner-after-width: 4px;
  --#{$name}-inner-after-height: 8px;
  --#{$name}-inner-after-top: 2px;
  --#{$name}-inner-after-left: 5px;

  // indeterminate
  --#{$name}-inner-before-width: 10px;
  --#{$name}-inner-before-height: 2px;
  --#{$name}-inner-before-top: 6px;
  --#{$name}-inner-before-left: 2px;

  // 内容
  --#{$name}-label-text-margin: 0 4px;

  // 边框
  --#{$name}-border-height: 32px;
  --#{$name}-border-line-height: 30px;
  --#{$name}-border-radius: 4px;
  --#{$name}-border-padding: 0 15px;

  // disabled
  --#{$name}-disabled-bg: #f8f9fd;
}

.#{$name} {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  position: relative;

  &-wrapper {
    cursor: pointer;
    font-size: var(--#{$name}-font-size);
    display: inline-block;
    margin-right: var(--#{$name}-right);

    + span {
      padding-left: var(--#{$name}-text-padding-left);
    }

    // 禁用
    &--disabled {
      cursor: var(--ivue-cursor-disabled);
    }

    // 激活边框
    &--checked.#{$name}-border {
      border-color: var(--ivue-primary-color);
    }

    // 禁用边框
    &--disabled.#{$name}-border {
      border-color: var(--ivue-border-color);
    }
  }

  // 禁用
  &-disabled {
    cursor: var(--ivue-cursor-disabled);
  }

  // 禁用选择
  &-disabled.#{$name}-checked &-inner {
    border-color: var(--ivue-border-color);
    background-color: var(--#{$name}-disabled-bg);

    &::after {
      border-color: var(--ivue-disabled-color);
    }
  }

  // 禁用未选择
  &-disabled &-inner {
    border-color: var(--ivue-border-color);
    background-color: var(--#{$name}-disabled-bg);
  }

  // 方框
  &-inner {
    display: inline-block;
    width: var(--#{$name}-inner-size);
    height: var(--#{$name}-inner-size);
    position: relative;
    top: 0;
    left: 0;
    border: 1px solid var(--ivue-border-color);
    border-radius: var(--#{$name}-inner-radius);
    background-color: var(--ivue-white-color);
    transition: border-color var(--ivue-default-transition-time)
        var(--ivue-ease-in-out),
      background-color var(--ivue-default-transition-time)
        var(--ivue-ease-in-out),
      box-shadow var(--ivue-default-transition-time) var(--ivue-ease-in-out);

    // 中间样式
    &::after {
      content: '';
      position: absolute;
      top: var(--#{$name}-inner-after-top);
      left: var(--#{$name}-inner-after-left);
      display: table;
      width: var(--#{$name}-inner-after-width);
      height: var(--#{$name}-inner-after-height);
      border: 2px solid var(--ivue-border-color);
      border-top: 0;
      border-left: 0;
      transform: rotate(45deg) scale(0);
      transition: var(--ivue-all-transition);
    }

    // indeterminate
    &::before {
      content: '';
      position: absolute;
      top: var(--#{$name}-inner-before-top);
      left: var(--#{$name}-inner-before-left);
      display: none;
      width: var(--#{$name}-inner-before-width);
      height: var(--#{$name}-inner-before-height);
    }
  }

  // 输入框
  &-input {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: pointer;
    opacity: 0;

    &[disabled] {
      cursor: not-allowed;
    }
  }

  // 内容
  &-label-text {
    margin: var(--#{$name}-label-text-margin);

    // 禁用
    &--disabled {
      color: var(--ivue-disabled-color);
    }
  }

  // 选中
  &-checked &-inner {
    border-color: currentColor;
    background-color: currentColor;

    &::after {
      border-color: var(--ivue-white-color);
      transform: rotate(45deg) scale(1);
    }
  }

  // 组合
  &-group {
    font-size: var(--#{$name}-font-size);

    &--item {
      display: inline-block;
    }
  }

  // 边框
  &-border {
    border: 1px solid var(--ivue-border-color);
    border-radius: var(--#{$name}-border-radius);
    height: var(--#{$name}-border-height);
    line-height: var(--#{$name}-border-line-height);
    padding: var(--#{$name}-border-padding);
    transition: border var(--ivue-default-transition-time)
      var(--ivue-ease-in-out);
  }

  // indeterminate
  &-indeterminate &-inner {
    border-color: currentColor;
    background-color: currentColor;

    &::after {
      display: none;
    }

    &::before {
      content: '';
      display: table;
      background-color: var(--ivue-white-color);
    }
  }
}