/**
 * Checkbox 选择框
 * @Author 瞿龙俊 - qulongjun@shine.design
 * @Date 2020-03-22 13:09
 */
$shine-checkbox-base-color: shine-base-color(grey, 1);

$shine-checkbox-config: (
  self: (
    transition: all 0.3s ease,
    size: 18px,
    tick: 6px
  ),

  outline: (
    border: (
      default: darken($shine-checkbox-base-color, 12%),
      checked: darken($shine-checkbox-base-color, 15%)
    ),
    tick: darken($shine-checkbox-base-color, 18%)
  ),

  solid: (
    bg: (
      default: darken($shine-checkbox-base-color, 6%),
      checked: darken($shine-checkbox-base-color, 8%)
    ),
    tick: darken($shine-checkbox-base-color, 30%)
  )
);

// Base
.#{$classPrefix}-checkbox {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  text-align: left;
  cursor: pointer;
  font-size: 1rem;
  transition: shine-get($shine-checkbox-config, self, transition);

  &.#{$classPrefix}-checkbox--disabled {
    opacity: 0.8;
    cursor: not-allowed;
  }

  // Hide default browser input
  > input {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }

  > span {
    @include shine-rounded {
      border-radius: 3px;
    }

    background: none;
    position: absolute;
    top: 1px;
    left: 0;
    height: shine-get($shine-checkbox-config, self, size);
    width: shine-get($shine-checkbox-config, self, size);

    &:after {
      content:'';
      position: absolute;
      display: none; // Hide check
      top: 50%;
      left: 50%;
      margin-left: -2px;
      margin-top: -6px;
      width: 5px;
      height: 10px;
      border-width: 0 2px 2px 0#{'/*rtl:ignore*/'} !important;
      transform: rotate(45deg)#{'/*rtl:ignore*/'};
    }
  }

  > input:checked ~ span {
    transition: shine-get($shine-checkbox-config, self, transition);
    background: none;
    &:after {
      display: block;
    }
  }

  &:hover > input:not([disabled]):checked ~ span,
  > input:checked ~ span {
    transition: shine-get($shine-checkbox-config, self, transition);

  }

  > input:disabled ~ span {
    opacity: 0.6;
    pointer-events: none;
  }

  &.#{$classPrefix}-checkbox--solid {
    > span {
      border: 1px solid transparent;
    }

    &:hover > input:not([disabled]) ~ span,
    > input:focus ~ span {
      transition: shine-get($shine-checkbox-config, self, transition);
    }
  }

  &.#{$classPrefix}-checkbox--square {
    > span {
      border-radius: 0;
    }
  }

  &.#{$classPrefix}-checkbox--bold > span {
    border-width: 2px !important;
    transition: shine-get($shine-checkbox-config, self, transition);
  }

  .form-inline & {
    margin-left: 15px;
    margin-right: 15px;
  }

  &.#{$classPrefix}-checkbox--single {
    width: shine-get($shine-checkbox-config, self, size);
    height: shine-get($shine-checkbox-config, self, size);

    > span {
      top: 0px;
    }

    th > &,
    td > & {
      right: -5px;
    }
  }

  // Input group
  .input-group & {
    margin-bottom: 0 !important;
    padding-left: 0;
  }
}

.#{$classPrefix}-checkbox-list {
  padding: 0 0;

  .form-horizontal .form-group & {
    padding-top: 0;
  }

  .#{$classPrefix}-checkbox {
    text-align: left;
    display: block;

    &:last-child {
      margin-bottom: 5px;
    }
  }
}

.#{$classPrefix}-checkbox-inline {
  padding: 0 0;

  .#{$classPrefix}-checkbox {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 5px;

    &:last-child {
      margin-right: 0;
    }
  }
}

.form-group.row {
  .#{$classPrefix}-checkbox-inline {
    margin-top: 0.75rem;
  }

  .#{$classPrefix}-checkbox-list {
    margin-top: 2px;
  }
}

// Skin
@mixin shine-checkbox-theme(
  $outline-border-color,
  $outline-border-checked-color,
  $outline-tick-color,
  $solid-bg-color,
  $solid-bg-checked-color,
  $solid-tick-color) {

  &.#{$classPrefix}-checkbox--disabled {
    opacity: 0.7;
  }

  // Outline
  > span {
    border: 1px solid $outline-border-color;

    &:after {
      border: solid $outline-tick-color;
    }
  }

  > input:disabled ~ span {
    &:after {
      border-color: $outline-border-checked-color;
    }
  }

  > input:checked ~ span {
    border: 1px solid $outline-border-checked-color;
  }

  &.#{$classPrefix}-checkbox--bold > input:checked ~ span {
    border: 2px solid $outline-border-checked-color;
  }

  > input:disabled ~ span {
    opacity: 0.6;
  }

  // Solid
  &.#{$classPrefix}-checkbox--solid {
    > span {
      background: $solid-bg-color;
      border: 1px solid transparent !important;

      &:after {
        border: solid $solid-tick-color;
      }
    }


    > input:focus ~ span {
      border: 1px solid transparent !important;
    }

    > input:checked ~ span {
      background: $solid-bg-checked-color;
    }
  }
}

// Default
.#{$classPrefix}-checkbox {
  @include shine-checkbox-theme(
      shine-get($shine-checkbox-config, outline, border, default),
      shine-get($shine-checkbox-config, outline, border, checked),
      shine-get($shine-checkbox-config, outline, tick),
      shine-get($shine-checkbox-config, solid, bg, default),
      shine-get($shine-checkbox-config, solid, bg, checked),
      shine-get($shine-checkbox-config, solid, tick)
  );

  // State Colors
  @each $name, $color in $shine-state-colors {
    // default state
    &.#{$classPrefix}-checkbox--#{$name} {
      @include shine-checkbox-theme(
          shine-get($color, base),
          shine-get($color, base),
          shine-get($color, base),
          shine-get($color, base),
          shine-get($color, base),
          shine-get($color, inverse)
      );
    }
  }
}