@layer components {
  [data-slot="badge"] {
    display: inline-flex;
    align-items: center;

    vertical-align: middle;
    gap: var(--badge-space-gap);
    padding: var(--badge-space-y) var(--badge-space-x);

    border-radius: var(--badge-radius);
    border-width: 1px;
    font-size: var(--badge-font-size);

    line-height: var(--badge-line-height);
    font-weight: var(--font-weight-medium);

    white-space: nowrap;
  }

  @supports (text-box-trim: trim-both) and (text-box-edge: cap alphabetic) {
    [data-slot="badge-label"] {
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
    }
  }

  [data-slot="badge"][data-tabular] {
    font-variant-numeric: tabular-nums;
  }

  [data-slot="badge"][data-tinted] {

    background-color: color-mix(
      in srgb,
      var(--badge-tint-surface),
      var(--badge-color) var(--badge-tint-fill)
    );
    border-color: color-mix(
      in srgb,
      var(--badge-tint-surface),
      var(--badge-color) var(--badge-tint-edge)
    );
    color: var(--badge-tint-foreground);
  }

  [data-slot="badge-icon"] {
    width: var(--badge-icon-size);
    height: var(--badge-icon-size);
    flex-shrink: 0;
  }

  [data-slot="badge"][data-removable] {
    padding-inline-end: var(--badge-space-x-removable);
  }

  [data-slot="badge-remove"] {
    flex-shrink: 0;
    margin-inline-end: var(--badge-remove-offset-inline-end);
    color: inherit;
    opacity: var(--badge-remove-rest-alpha);
    border: 0;
    padding: 0;
    cursor: pointer;
    background: transparent;
  }

  [data-slot="badge-remove"]:hover,
  [data-slot="badge-remove"]:focus-visible {
    opacity: var(--badge-remove-hover-alpha);
  }

  [data-slot="badge-remove"] svg {
    width: var(--badge-remove-icon-size);
    height: var(--badge-remove-icon-size);
  }
}