@layer kz-components {
  .container {
    position: relative;
    overflow-wrap: anywhere;
    word-break: normal;
    margin-bottom: var(--spacing-sm);

    label {
      -webkit-tap-highlight-color: transparent;

      :global(.ideal-sans) & {
        /* This is to override bootstrap styles. Remove when appropriate */
        font-size: var(--typography-paragraph-body-font-size);
        padding-top: 0;
      }
    }

    &.selected label {
      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-bold-font-weight);
      position: static;
    }

    &:not(.reversed) label:hover input:not([disabled]) + span {
      border-color: var(--color-gray-600);
      background-color: var(--color-gray-200);
    }

    &.reversed label:hover input:not([disabled]) + span {
      border-color: var(--color-white);
      background-color: transparent;
    }
  }
}