@layer kz-components {
  :root {
    --label-start-margin: var(--spacing-xs);
    --dt-color-form-text-color: var(--color-purple-800);
  }

  .label {
    --icon-vertical-align: text-bottom;
  }

  .label,
  :global(.ideal-sans) .label {
    /* override Murmur global styles :( */
    opacity: inherit;
    color: var(--dt-color-form-text-color);
    visibility: visible;
    width: 100%;
    text-align: start;
  }

  .reversed {
    color: var(--color-white);

    a {
      color: var(--color-white);

      &:hover {
        text-decoration: none;
      }
    }
  }

  .disabled {
    opacity: 0.3;
  }

  /* ///////////////////////////////////////////////////
  ////  LABEL TYPES
  //////////////////////////////////////////////////// */

  /* This is to override bootstrap styles. Remove when appropriate */
  .text,
  :global(.ideal-sans) .text {
    font-family: var(--typography-heading-6-font-family);
    font-size: var(--typography-heading-6-font-size);
    line-height: var(--typography-heading-6-line-height);
    letter-spacing: var(--typography-heading-6-letter-spacing);
    font-weight: var(--typography-heading-6-font-weight);
  }

  .checkboxOrRadio,
  .checkbox,
  .radio,
  :global(.ideal-sans) .checkboxOrRadio {
    display: flex;
    font-family: var(--typography-paragraph-body-font-family);
    font-size: var(--typography-paragraph-body-font-size);
    line-height: var(--typography-paragraph-body-line-height);
    letter-spacing: var(--typography-paragraph-body-letter-spacing);
    font-weight: var(--typography-paragraph-body-font-weight);
  }

  .toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--typography-paragraph-body-font-family);
    font-size: var(--typography-paragraph-body-font-size);
    line-height: var(--typography-paragraph-body-line-height);
    letter-spacing: var(--typography-paragraph-body-letter-spacing);
    font-weight: var(--typography-paragraph-body-font-weight);
  }

  .checkbox,
  .radio,
  .toggle {
    /* apply padding when label is inline with form control */
    .prependedLabel {
      order: -1; /* place label before the control */
      margin-inline-end: var(--label-start-margin);
    }

    .appendedLabel {
      margin-inline-start: var(--label-start-margin);
    }
  }

  .prominent {
    font-family: var(--typography-heading-4-font-family);
    font-weight: var(--typography-heading-4-font-weight);
    font-size: var(--typography-heading-4-font-size);
    line-height: var(--typography-heading-4-line-height);
    letter-spacing: var(--typography-heading-4-letter-spacing);
    display: block;
    margin-bottom: var(--spacing-xs);
  }
}