:host(us-label) {
  display: flex;

  .uslabel {
    display: flex;
    align-items: center;
    padding: var(--space-inline-xs) var(--space-inline-s);
    border-radius: var(--border-radius-m);
    font: var(--text-p-xs-heavy);

    /* Ensure the label is always aligned on the baseline */
    &::before {
      content: "\2003";
      display: inline-block;
      width: 0;
    }

    &__neutral {
      background-color: var(--color-neutral-300);
      color: var(--color-neutral-900);
    }

    &__attention {
      background-color: var(--color-danger-100);
      color: var(--color-danger-1000);
    }

    &__warning {
      background-color: var(--color-warning-100);
      color: var(--color-warning-1000);
    }

    &__success {
      background-color: var(--color-success-100);
      color: var(--color-success-1000);
    }

    &__secondary {
      background-color: var(--color-secondary-100);
      color: var(--color-secondary-1000);
    }

    &__primary {
      background-color: var(--color-primary-100);
      color: var(--color-primary-1000);
    }

    slot[name="leadingIcon"]::slotted(*) {
      margin-right: var(--space-inline-xs);
    }

    slot[name="trailingIcon"]::slotted(*) {
      margin-left: var(--space-inline-xs);
    }
  }
}