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

@layer kz-components {
  .multiSelectOptionField {
    display: flex;
    align-items: flex-start;
    gap: $spacing-6;
    padding: $spacing-6;
    border-radius: $border-solid-border-radius;
    position: relative;

    &:hover,
    &:focus-within {
      background: $color-blue-100;

      .checkbox {
        border-color: $color-gray-600;
        background-color: $color-gray-200;

        &.checked {
          background-color: $color-gray-600;
        }
      }
    }

    &:focus-within {
      &::after {
        z-index: 2;
        width: calc(100% + 2px);
        height: calc(100% + 2px);
        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;
      }

      // removes default checkbox focus ring
      .checkbox::after {
        display: none;
      }
    }
  }

  .label {
    color: $color-purple-800;
    font-family: $typography-paragraph-body-font-family;
    font-weight: $typography-paragraph-body-font-weight;
    font-size: $typography-paragraph-body-font-size;
    line-height: $typography-paragraph-body-line-height;
    letter-spacing: $typography-paragraph-body-letter-spacing;
    overflow-wrap: anywhere;

    // Increases the hit area of the checkbox label to the size of
    // the surrounding div for better mouse user experience
    &::before {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
  }
}