@import "~@cultureamp/kaizen-design-tokens/sass/color";
@import "~@cultureamp/kaizen-component-library/styles/color";
@import "~@cultureamp/kaizen-component-library/styles/border";
@import "~@cultureamp/kaizen-component-library/styles/mixins/forms";

$checkbox-size: 20px;
$checkbox-border-width: 1px;
$icon-size: 20px;

.checkbox {
  @include form-input-visually-hidden();
}

.icon {
  height: $checkbox-size;
  width: $checkbox-size;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  // .icon is inside .box so .box's border-box rule means
  // .icon sits to the right of .box's left-side border
  left: -1px;
}

.box {
  position: relative;
  background: $kz-color-white;
  height: $checkbox-size;
  width: $checkbox-size;
  top: 0;
  border: 1px solid $ca-border-color;
  border-radius: $ca-border-radius;
  box-sizing: border-box;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.09);

  .checkbox:disabled + & {
    background: $kz-color-ash;

    .icon {
      opacity: 0.3;
    }
  }

  .checkbox:focus:not([disabled]) + &,
  .checkbox:hover:focus:not([disabled]) + & {
    @include form-input-focus-border($ca-border-color-focus);
  }

  .checkbox:not([disabled]) + &:hover {
    border-color: $ca-border-color-hover;
  }
}