/* -------------------------------- 

File#: _1_chips
Title: Chips
Descr: A list of compact pieces of information
Usage: codyhouse.co/license

-------------------------------- */
.chip {
    /* reset - in case the class is applied to a <button> or an <a> */
    border: 0;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    border-radius: 50em;
    padding: var(--space-xxs) var(--space-sm);
}

.chip--outline {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.25)
}

.chip--error {
    background-color: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.2);
    color: var(--color-contrast-higher)
}

.chip--success {
    background-color: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), 0.2);
    color: var(--color-contrast-higher)
}

.chip--warning {
    background-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), 0.2);
    color: var(--color-contrast-higher)
}

.chip--interactive {
    cursor: pointer;
    transition: background, box-shadow, transform;
    transition-duration: 0.2s
}

.chip--interactive:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.2)
}

.chip--interactive:active {
    transform: translateY(1px)
}

.chip--interactive:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.95)
}

.chip__label {
    padding: 0 var(--space-2xs)
}

.chip__img {
    display: block;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover
}

.chip__icon-wrapper {
    display: flex;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.95);
    color: var(--color-bg)
        /* icon color */
}

.chip__icon-wrapper .icon {
    display: block;
    margin: auto
}

.chip__btn {
    display: flex;
    width: 1.5em;
    height: 1.5em;
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.2);
    border-radius: 50%;
    will-change: transform;
    transition: background, box-shadow, transform;
    transition-duration: 0.2s
}

.chip__btn .icon {
    display: block;
    margin: auto
}

.chip__btn:hover {
    background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.3)
}

.chip__btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.95)
}

.chip__btn:active {
    transform: translateY(1px)
}

.bg-filter-contrast-high {
    background-color: hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), 0.40);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}