@import '~@kaizen/design-tokens/sass/color';
@import '~@kaizen/design-tokens/sass/border';

@layer kz-components {
  $checkbox-size: 24px;
  $focus-ring-offset: 2px;
  $focus-ring-size: calc(#{$checkbox-size} + #{$focus-ring-offset});

  .checkbox {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    min-width: $checkbox-size;
    width: $checkbox-size;
    height: $checkbox-size;
    border: $border-solid-border-width $border-solid-border-style $color-gray-500;
    border-radius: $border-solid-border-radius;
    background: $color-white;

    &:hover,
    &:focus-within {
      background: $color-gray-200;
      border-color: $color-gray-600;
    }

    &:focus-within {
      &::after {
        width: $focus-ring-size;
        height: $focus-ring-size;
        content: '';
        pointer-events: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: $border-focus-ring-border-radius;
        border-width: $border-focus-ring-border-width;
        border-style: $border-focus-ring-border-style;
        border-color: $color-blue-500;
      }
    }
  }

  // Selected = Checked or Indeterminate
  .selected {
    background: $color-gray-500;
    // To do: fix this in the CSS uplift
    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
    background-color: $color-gray-500;

    &:hover,
    &:focus-within {
      background: $color-gray-600;
      border-color: $color-gray-600;
    }
  }

  .nativeCheckbox {
    opacity: 0%;
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .iconContainer {
    display: inline-block;
    position: relative;
    pointer-events: none;
    height: 100%;
    width: 100%;
  }

  .icon {
    color: $color-white;
  }
}