@layer lotek {
  .lt-badge {
    /* The design system cannot assume the consumer has a CSS reset. Without
       border-box, padding and border are added outside the width, and the
       element becomes wider than the box it sits in. */
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    gap: var(--lt-spacing-1);
    padding: var(--lt-badge-padding, var(--lt-spacing-0-5) var(--lt-spacing-2));
    font-family: inherit;
    font-size: var(--lt-font-size-xs);
    font-weight: var(--lt-font-weight-semibold);
    line-height: var(--lt-line-height-default);
    border-radius: var(--lt-badge-radius, var(--lt-spacing-4));
    white-space: nowrap;
    user-select: none;
    background: var(--lt-color-accent-surface);
    color: var(--lt-color-accent-text);
  }

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

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

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

  .lt-badge[data-color="neutral"] {
    background: var(--lt-color-neutral-surface);
    color: var(--lt-color-neutral-text);
  }
}