@layer mtb-components {
  .mtb-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--mtb-space-2);
    padding: 6px 12px;
    border-radius: var(--mtb-radius-pill);
    font-size: var(--mtb-fs-xs);
    line-height: 1.2;
    border: 1px solid #374151;
    background: rgba(15, 23, 42, 0.75);
    color: var(--mtb-text-strong);
    transition: all 150ms ease;
    cursor: pointer;
    text-decoration: none;
  }

  .mtb-pill:hover {
    filter: brightness(1.05);
  }

  .mtb-pill.is-active {
    background: rgba(15, 23, 42, 0.95);
    border-color: transparent;
    background-image:
      linear-gradient(#05080F, #05080F),
      var(--mtb-grad-teal-yellow);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: var(--mtb-text-white);
  }

  .mtb-pill.metric {
    padding: 4px 10px;
    color: var(--mtb-text-muted);
    background: rgba(15, 23, 42, 0.85);
  }
}