@use 'sass:math';
@use 'common/var.scss'as *;
@use 'mixins/mixins'as *;

#{getClassName((checkbox))} {
  font-size: #{getValName((checkbox, font-size))};
  cursor: pointer;
  display: inline-flex;
  line-height: 1;
  align-items: flex-start;
  padding: .6em 0em;
  min-height: 2.2em;
  input {
    display: none;
  }
  &.is-disabled {
    cursor: not-allowed;
  }
  &.is-indeterminate {
    #{getClassName((checkbox, input, box))} {
      &:after {
        border-right: 0px;
        transform: none;
        // width: .5em;
        // border: 0px;
        height: 0em;
        margin-top: 0em;
        // background-color: #FFF;
        // transform: none;
      }
    }
    // input:checked + & {
    //   &:after {
    //     transform: rotate(45deg) scaleY(1);
    //   }
    // }
  }
}

#{getClassName((checkbox))} {
  #{getClassName((checkbox, input, box))} {
    background-color: transparent;
  }
  @include set-css-val(
    checkbox,
    (
      'font-size': (heading8),
      'border-color': (color, neutral, 3),
      'disabled-border-color': (color, neutral, 3),
      'disabled-background-color': (color, neutral, 1),
      'checked-border-color': (color, primary),
      'checked-background-color': (color, primary),
      'checked-disabled-border-color': (color, neutral, 5),
      'checked-disabled-background-color': (color, neutral, 5),
    )
  )
}

#{getClassName((checkbox, large))} {
  @include set-css-val(
    checkbox,
    (
      'font-size': (heading7)
    )
  );
}

#{getClassName((checkbox, mini))} {
  @include set-css-val(
    checkbox,
    (
      'font-size': (heading9)
    )
  );
}

#{getClassName((checkbox, input))} {
  display: inline-flex;
  align-items: center;
}

#{getClassName((checkbox, input, box))} {
  display: inline-flex;
  overflow: hidden;
  position: relative;
  width: 1em;height:1em;border-radius: 2px;
  background-color: transparent;
  border: 1px solid;
  color: #FFF;
  border-color: #{getValName((checkbox, border-color))};
  background-color: #{getValName((checkbox, background-color))};
  justify-content: center;
  &:after {
    position: absolute;
    display: table;
    width: .36em;height: .64em;
    top: 50%;
    margin-top: -0.4em;
    // border-radius: 2px;
    border-right: currentColor solid 1px;
    border-bottom: currentColor solid 1px;
    content: '';
    transform: rotate(45deg) scaleY(0);
    transform-origin: center center;
    transition: .2s all;
  }
  
  input:checked + & {
    border-color: #{getValName((checkbox, checked-border-color))};
    background-color: #{getValName((checkbox, checked-background-color))};
    &:after {
      transform: rotate(45deg) scaleY(1);
    }
  }
  input:disabled + & {
    border-color: #{getValName((checkbox, disabled-border-color))};
    background-color: #{getValName((checkbox, disabled-background-color))};
  }
  input:checked:disabled + & {
    border-color: #{getValName((checkbox, checked-disabled-border-color))};
    background-color: #{getValName((checkbox, checked-disabled-background-color))};
  }

  
}
#{getClassName((checkbox, label))} {
  margin-left: #{getValName((space, xs))};
}

#{getClassName((checkbox, group, mode-button))} {
  display: flex;
  #{getClassName((checkbox))} {
    position: relative;
    padding-left: 1em;
    padding-right: 1em;
    border: 1px solid  #{getValName((checkbox, border-color))};
    &:first-child {
      border-top-left-radius: #{getValName((border, radius, base))};
      border-bottom-left-radius: #{getValName((border, radius, base))};
    }
    &:last-child {
      border-top-right-radius: #{getValName((border, radius, base))};
      border-bottom-right-radius: #{getValName((border, radius, base))};
    }
    &:not(:first-child) {
      margin-left: -1px;
    }
    &.is-disabled {
      color: #{getValName((checkbox, disabled-border-color))};
      border-color: #{getValName((checkbox, disabled-border-color))};
    }
    &.is-checked {
      color: #{getValName((checkbox, checked-border-color))};
      border-color: #{getValName((checkbox, checked-border-color))};
      z-index: 1;
    }
  }
  #{getClassName((checkbox, input))} {
    display:none;
  }
  #{getClassName((checkbox, label))} {
    margin-left: 0px;
  }
  &[class*='checkbox-group-type-'] {
    #{getClassName((checkbox))}.is-checked {
      color: #{getValName((color, neutral, 0))};
      border-color: #{getValName((checked, border-color))};
      background-color: #{getValName((checked, background-color))};
    }
  }
  @each $item in $types {
    &#{getClassName((checkbox, group, type, $item))} {
      @include set-css-val(checked,
      (color: (color, neutral, 0),
        'border-color': (color, $item),
        'background-color': (color, $item)));
    }
  }
}