@layer lotek {
  .lt-error-text {
    display: block;
    /* The whole margin is set, not just the top: without it a <p> inherits
       the browser's 1em at the bottom for consumers without a reset. */
    margin: var(--lt-spacing-1) 0 0;
    font-family: inherit;
    font-size: var(--lt-font-size-xs);
    font-weight: var(--lt-font-weight-medium);
    line-height: var(--lt-line-height-compact);
    color: var(--lt-color-danger-text);
  }

  .lt-error-text[hidden] {
    display: none;
  }

  .lt-error-text[data-variant="warning"] {
    color: var(--lt-color-warning-text);
  }
}