@layer lotek {
  .lt-label {
    display: block;
    font-family: inherit;
    font-size: var(--lt-font-size-s);
    font-weight: var(--lt-font-weight-semibold);
    line-height: var(--lt-line-height-default);
    color: var(--lt-color-neutral-text-strong);
  }

  .lt-label[data-required]::after {
    content: var(--lt-label-required-symbol, " *");
    color: var(--lt-color-danger-text);
    font-weight: var(--lt-font-weight-bold);
  }

  .lt-label[data-required="text"]::after {
    /* Keep the fallback ASCII. A stylesheet without `@charset` inherits the
       page's encoding, and a non-ASCII fallback came out garbled when the
       page lacked `<meta charset>` and the server sent no charset. Write any
       other character as an escape, such as `\e5`. */
    content: var(--lt-label-required-text, " (required)");
    color: var(--lt-color-danger-text);
    font-weight: var(--lt-font-weight-regular);
    font-size: var(--lt-font-size-xs);
  }

  /* Not when the field is also marked required: the builder function picks
     required, and hand-written markup with both must give the same result.
     The colour is not `disabled-text`: the text is not disabled, and that
     colour gave 4.37:1. */
  .lt-label[data-optional]:not([data-required])::after {
    content: var(--lt-label-optional-text, " (optional)");
    color: var(--lt-color-neutral-text-subtle);
    font-weight: var(--lt-font-weight-regular);
    font-size: var(--lt-font-size-xs);
  }

  .lt-label[aria-disabled="true"] {
    color: var(--lt-color-neutral-text-subtle);
  }
}