.chip {
    --chip-background-color: var(--layer-background);
    --chip-selected-state-layer: var(--secondary-container);
    --chip-on-selected-state-layer: var(--on-secondary-container);
    --chip-color: var(--on-background);

    align-items: center;
    background-color: var(--chip-background-color);
    border-radius: var(--radius-small);
    border: 1px solid var(--outline);
    color: var(--chip-color);
    display: inline-flex;
    font-size: var(--font-size-body-medium);
    font-weight: var(--font-weight-5);
    gap: var(--size-1);
    height: 32px;
    line-height: var(--font-lineheight-2);
    padding-inline: var(--size-2);
    transition: background-color 0.2s var(--ease-standard);
    text-decoration: none;

    svg {
        color: var(--primary);
        height: 18px;
        width: 18px;
        flex-shrink: 0;
    }

    &.selected {
        background-color: var(--chip-selected-state-layer);
        border-color: transparent;
        color: var(--chip-on-selected-state-layer);

        svg {
            color: var(--chip-on-selected-state-layer);
        }
    }

    &.elevated {
        box-shadow: var(--elevation-1);
        border: none;
        background-color: var(--layer-background);
    }

    &.small {
        height: 24px;
        padding-inline: var(--size-2);
        font-size: var(--font-size-body-small);

        svg {
            height: 16px;
            width: 16px;
        }
    }

    &.assist {
        background-color: var(--layer-widget);
        color: var(--on-background);
        border: none;
        height: 32px;

        svg {
            color: var(--on-layer-widget);
        }
    }
    &.filter {
        background-color: var(--layer-surface-container);
        color: var(--on-background);
        border: 1px solid var(--outline);
        height: 32px;
        svg {
            color: var(--on-layer-widget);
        }
    }

    &.input {
        background-color: var(--layer-background);
        color: var(--on-background);
        border: none;
        height: 32px;
        box-shadow: var(--elevation-1);
        svg {
            color: var(--on-layer-widget);
        }
    }

    &.suggestion {
        background-color: var(--layer-background);
        color: var(--on-background);
        border: 1px solid transparent;
        height: 32px;
        svg {
            color: var(--on-layer-widget);
        }
    }

    /* Hover state */
    &:hover {
        background-color: color-mix(
            in srgb,
            var(--chip-state-layer) 92%,
            var(--on-background)
        );
        cursor: pointer;
    }

    &:active {
        background-color: color-mix(
            in srgb,
            var(--chip-state-layer) 88%,
            var(--on-background)
        );
    }

    &:disabled {
        background-color: color-mix(
            in srgb,
            var(--layer-background) 12%,
            var(--on-background)
        );
        color: var(--on-background);
        opacity: 0.38;
        pointer-events: none;
    }

    &.error,
    &.red {
        background-color: rgb(from var(--red-chip) r g b / 0.25);
        color: var(--on-red-chip);
        border: none;
    }

    &.pink {
        background-color: rgb(from var(--pink-chip) r g b / 0.25);
        color: var(--on-pink-chip);
        border: none;
    }

    &.purple {
        background-color: rgb(from var(--purple-chip) r g b / 0.25);
        color: var(--on-purple-chip);
        border: none;
    }

    &.violet {
        background-color: rgb(from var(--violet-chip) r g b / 0.25);
        color: var(--on-violet-chip);
        border: none;
    }

    &.indigo {
        background-color: rgb(from var(--indigo-chip) r g b / 0.25);
        color: var(--on-indigo-chip);
        border: none;
    }

    &.blue {
        background-color: rgb(from var(--blue-chip) r g b / 0.25);
        color: var(--on-blue-chip);
        border: none;
    }

    &.cyan {
        background-color: rgb(from var(--cyan-chip) r g b / 0.25);
        color: var(--on-cyan-chip);
        border: none;
    }

    &.teal {
        background-color: rgb(from var(--teal-chip) r g b / 0.25);
        color: var(--on-teal-chip);
        border: none;
    }

    &.green {
        background-color: rgb(from var(--green-chip) r g b / 0.25);
        color: var(--on-green-chip);
        border: none;
    }

    &.lime {
        background-color: rgb(from var(--lime-chip) r g b / 0.25);
        color: var(--on-lime-chip);
        border: none;
    }

    &.yellow {
        background-color: rgb(from var(--yellow-chip) r g b / 0.25);
        color: var(--on-yellow-chip);
        border: none;
    }

    &.orange {
        background-color: rgb(from var(--orange-chip) r g b / 0.25);
        color: var(--on-orange-chip);
        border: none;
    }

    &.choco {
        background-color: rgb(from var(--choco-chip) r g b / 0.25);
        color: var(--on-choco-chip);
        border: none;
    }

    &.brown {
        background-color: rgb(from var(--brown-chip) r g b / 0.25);
        color: var(--on-brown-chip);
        border: none;
    }

    &.camo {
        background-color: rgb(from var(--camo-chip) r g b / 0.25);
        color: var(--on-camo-chip);
        border: none;
    }

    &.jungle {
        background-color: rgb(from var(--jungle-chip) r g b / 0.25);
        color: var(--on-jungle-chip);
        border: none;
    }
    &.filled {
        background-color: var(--chip-background-color);
        color: var(--chip-color);
        border: none;
    }
}
.chip--selected {
    background: var(--secondary-container);
    color: var(--on-secondary-container);
}

.chip--selected:hover {
    background: var(--secondary-container);
    filter: brightness(0.95);
}

.chip--disabled {
    background: var(--layer-background);
    color: var(--on-layer-widget);
    cursor: not-allowed;
    opacity: 0.38;
    pointer-events: none;
}

.chip__avatar {
    height: 24px;
    margin-inline-start: -4px;
    width: 24px;
}

.chip__avatar img {
    border-radius: var(--radius-full);
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.chip__icon {
    color: var(--on-layer-widget);
    display: flex;
    font-size: 18px;
    height: 18px;
    margin-inline-start: -2px;
    width: 18px;
}

.chip__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip__dismiss {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    color: var(--on-layer-widget);
    cursor: pointer;
    display: flex;
    height: 24px;
    justify-content: center;
    margin-inline-end: -4px;
    padding: 0;
    width: 24px;
}

.chip__dismiss:hover {
    background: var(--layer-widget);
}

/* Specific styles for each variant */
.chip--assist {
    background: var(--layer-background);
}

.chip--filter {
    background: var(--layer-surface-container);
}

.chip--input {
    background: var(--layer-surface-container);
    padding-inline-end: var(--size-2);
}

.chip--suggestion {
    background: var(--layer-background);
}