@layer lotek {
  .lt-alert {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--lt-spacing-1);
    padding: var(--lt-alert-padding, var(--lt-spacing-3) var(--lt-spacing-4));
    font-family: inherit;
    font-size: var(--lt-font-size-m);
    line-height: var(--lt-line-height-default);
    color: var(--lt-color-neutral-text-strong);
    background: var(--lt-color-neutral-surface);
    border-radius: var(--lt-alert-radius, var(--lt-spacing-1));
    /* Each colour has a line on the edge and a faint surface, set further
       down. The text keeps its contrast against that surface in both
       themes. */
    border-inline-start: var(--lt-alert-accent, var(--lt-spacing-1)) solid
      var(--lt-color-neutral-text);
  }

  .lt-alert__title {
    margin: 0;
    font-size: var(--lt-font-size-m);
    font-weight: var(--lt-font-weight-semibold);
    line-height: var(--lt-line-height-default);
  }

  /* Only the element counts, so the margin of an `lt-help-text` or
     `lt-error-text` in the message wins, as in the card. */
  :where(.lt-alert) p {
    margin: 0;
  }

  .lt-alert[data-color="success"] {
    background: var(--lt-color-success-surface);
    border-inline-start-color: var(--lt-color-success-text);
  }

  .lt-alert[data-color="warning"] {
    background: var(--lt-color-warning-surface);
    border-inline-start-color: var(--lt-color-warning-text);
  }

  .lt-alert[data-color="danger"] {
    background: var(--lt-color-danger-surface);
    border-inline-start-color: var(--lt-color-danger-text);
  }

  .lt-alert[data-color="info"] {
    background: var(--lt-color-accent-surface);
    border-inline-start-color: var(--lt-color-accent-border);
  }
}