@layer components {
    .chip {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        padding: 0.0625rem 0.4375rem;
        border-radius: 0.375rem;
        font-size: var(--font-size-caption);
        font-weight: 600;
        line-height: 1.35;
        white-space: nowrap;

        & code {
            padding: 0;
            background: none;
            font-size: inherit;
        }

        & svg {
            inline-size: 0.875em;
            block-size: 0.875em;
        }
    }

    .chip--style-tinted {
        background-color: color-mix(in oklch, currentColor 14%, transparent);
    }

    .chip--style-bordered {
        border: var(--hairline) solid
            color-mix(in oklch, currentColor 35%, transparent);
        font-weight: 500;
    }

    .chip--monospaced {
        justify-content: center;
        min-inline-size: 3.25rem;
        font-family:
            ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
            monospace;
        font-size: 0.6875rem;
        letter-spacing: 0.02em;
    }
}