@import "~@kaizen/design-tokens/sass/color";
@import "~@kaizen/design-tokens/sass/spacing";
@import "~@kaizen/design-tokens/sass/typography";
@import "../variables";

// -----------------------------------------------
// Checkbox Field
// -----------------------------------------------
///////////////////////////////////////////////////
// LAYOUT
///////////////////////////////////////////////////
.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;
    }
  }
}