@import '~@kaizen/design-tokens/sass/color';
@import '~@kaizen/design-tokens/sass/spacing';
@import '~@kaizen/design-tokens/sass/typography';
@import '../../../styles/utils/form-variables';

@layer kz-components {
  .container {
    position: relative;
    margin-bottom: $spacing-xs;

    label {
      // This is to override bootstrap styles. Remove when appropriate
      padding-top: 0;
      -webkit-tap-highlight-color: transparent;
    }

    &.noBottomMargin {
      margin-bottom: 0;
    }

    @media (hover: hover) and (pointer: fine) {
      label:hover {
        input:not([disabled]) + div {
          border-color: $dt-color-form-border-color;
          background-color: $color-gray-100;
        }
      }
    }

    &.checked,
    &.mixed {
      label {
        font-family: $typography-paragraph-body-font-family;
        font-size: $typography-paragraph-body-font-size;
        line-height: $typography-paragraph-body-line-height;
        letter-spacing: $typography-paragraph-body-letter-spacing;
        font-weight: $typography-paragraph-bold-font-weight;
        position: static;
      }
    }
  }

  .label {
    &:disabled {
      pointer-events: none;
    }
  }
}