@layer lotek {
  .lt-tag {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: var(--lt-spacing-1);
    padding: var(--lt-tag-padding, var(--lt-spacing-0-5) var(--lt-spacing-2));
    font-family: inherit;
    font-size: var(--lt-font-size-s);
    line-height: var(--lt-line-height-compact);
    color: var(--lt-color-neutral-text-strong);
    background: transparent;
    border: 1px solid var(--lt-color-neutral-border-subtle);
    border-radius: var(--lt-tag-radius, var(--lt-spacing-1));
  }

  .lt-tag[data-variant="filled"] {
    background: var(--lt-color-neutral-surface);
    border-color: transparent;
  }

  /* The tag can be toggled on and off, and is then a real button. */
  .lt-tag[data-selectable] {
    cursor: pointer;
  }

  .lt-tag[data-selectable]:hover {
    border-color: var(--lt-color-accent-border);
  }

  .lt-tag[data-selectable]:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: 2px;
  }

  .lt-tag[aria-pressed="true"] {
    background: var(--lt-color-accent-fill);
    border-color: var(--lt-color-accent-fill);
    color: var(--lt-color-accent-content);
  }

  .lt-tag:disabled,
  .lt-tag[aria-disabled="true"] {
    background: var(--lt-color-disabled-surface);
    border-color: var(--lt-color-disabled-surface);
    color: var(--lt-color-disabled-text);
    cursor: not-allowed;
  }

  /* High contrast: the selected tag differs only by colour. System colours
     get through where ours do not. */
  @media (forced-colors: active) {
    .lt-tag[aria-pressed="true"] {
      background-color: Highlight;
      color: HighlightText;
    }
  }
}