/*
    Styling for the Chip component. The chip itself does nothing when clicked, so it is styled as a
    label rather than a control; only its remove button looks and acts like a button.
*/
.chip
{
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding-top: 0.125rem;
    padding-right: 0.5rem;
    padding-bottom: 0.125rem;
    padding-left: 0.5rem;
    /* A radius larger than any chip's height rounds both ends fully. */
    border-radius: 999px;
    color: var(--neutral-surface-high-emphasis-contrast-color);
    background: var(--neutral-higher-emphasis-surface-color);
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: nowrap;
    cursor: default;

    /* Styling for the remove button, the chip's only interactive part. */
    .chip-remove-button
    {
        /* The button resets the browser's default border and padding to sit inside the chip. */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.1rem;
        height: 1.1rem;
        padding: 0;
        border: none;
        border-radius: 50%;
        color: var(--neutral-surface-medium-emphasis-contrast-color);
        background: transparent;
        font: inherit;
        cursor: pointer;

        &:hover,
        &:focus-visible
        {
            color: var(--neutral-surface-highest-emphasis-contrast-color);
            background: var(--neutral-highest-emphasis-surface-color);
        }

        &:active
        {
            filter: brightness(130%);
        }
    }
}