@ebay/skin/dist/filter-chip/filter-chip.css

Skin - CSS modules that represent the brand eBay

:root {
    --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
    --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
}

@keyframes fill-horizontal-background {
    0% {
        background-size: 0 100%;
    }
    99% {
        background-color: var(--color-background-primary);
    }
    to {
        background-color: var(--color-background-strong);
        background-size: 100% 100%;
    }
}

@keyframes chevron-bounce-open {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes chevron-bounce-close {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(7px);
    }
    to {
        transform: translateY(0);
    }
}

a.filter-chip,
button.filter-chip {
    align-items: center;
    background-color: var(--color-background-primary);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 0 100%;
    border: 1px solid var(--color-border-medium);
    border-radius: var(--border-radius-100);
    box-shadow: none;
    box-sizing: border-box;
    color: var(--color-foreground-primary);
    display: inline-flex;
    font-size: var(--font-size-body);
    gap: var(--spacing-75);
    height: var(--spacing-400);
    justify-content: space-between;
    max-width: 296px;
    min-width: 32px;
    padding: 0 var(--spacing-150);
    text-decoration: none;
    transition: all var(--motion-duration-short-3)
        var(--motion-easing-quick-enter);
    vertical-align: bottom;
}

a.filter-chip:active,
button.filter-chip:active {
    transform: scale(0.97);
}

a.filter-chip,
button.filter-chip {
    overflow: hidden;
    position: relative;
}

a.filter-chip:after,
button.filter-chip:after {
    background-color: var(--color-state-layer-neutral);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

a.filter-chip:not([disabled], [aria-disabled="true"]):hover:after,
a.filter-chip[href]:hover:after,
button.filter-chip:not([disabled], [aria-disabled="true"]):hover:after,
button.filter-chip[href]:hover:after {
    background-color: var(--color-state-layer-hover);
}

a.filter-chip:not([disabled], [aria-disabled="true"]):focus-visible:after,
a.filter-chip[href]:focus-visible:after,
button.filter-chip:not([disabled], [aria-disabled="true"]):focus-visible:after,
button.filter-chip[href]:focus-visible:after {
    background-color: var(--color-state-layer-focus);
}

a.filter-chip:not([disabled], [aria-disabled="true"]):active:after,
a.filter-chip[href]:active:after,
button.filter-chip:not([disabled], [aria-disabled="true"]):active:after,
button.filter-chip[href]:active:after {
    background-color: var(--color-state-layer-pressed);
}

a.filter-chip--expressive,
button.filter-chip--expressive {
    border-radius: var(--border-radius-150);
    height: 40px;
}

.filter-chip__media {
    align-items: center;
    border-radius: var(--spacing-400);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    margin-inline-start: -8px;
    overflow: hidden;
    position: relative;
}

.filter-chip__media:after {
    background: rgba(0, 0, 0, 0.05);
    content: "";
    display: block;
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.filter-chip__media > img {
    display: inline-block;
    height: var(--spacing-400);
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-fit: cover;
    width: var(--spacing-400);
}

a.filter-chip--selected,
button.filter-chip.filter-chip--selected,
button.filter-chip[aria-pressed="true"] {
    animation: fill-horizontal-background 0s var(--motion-easing-quick-enter)
        forwards;
    background-image: linear-gradient(
        to right,
        var(--color-background-strong) 0,
        var(--color-background-strong) 100%
    );
    color: var(--color-foreground-on-strong);
    overflow: hidden;
    position: relative;
}

a.filter-chip--selected:after,
button.filter-chip.filter-chip--selected:after,
button.filter-chip[aria-pressed="true"]:after {
    background-color: var(--color-state-layer-neutral-on-strong);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

a.filter-chip--selected:not([disabled], [aria-disabled="true"]):hover:after,
a.filter-chip--selected[href]:hover:after,
button.filter-chip.filter-chip--selected:not(
        [disabled],
        [aria-disabled="true"]
    ):hover:after,
button.filter-chip.filter-chip--selected[href]:hover:after,
button.filter-chip[aria-pressed="true"]:not(
        [disabled],
        [aria-disabled="true"]
    ):hover:after,
button.filter-chip[aria-pressed="true"][href]:hover:after {
    background-color: var(--color-state-layer-hover-on-strong);
}

a.filter-chip--selected:not(
        [disabled],
        [aria-disabled="true"]
    ):focus-visible:after,
a.filter-chip--selected[href]:focus-visible:after,
button.filter-chip.filter-chip--selected:not(
        [disabled],
        [aria-disabled="true"]
    ):focus-visible:after,
button.filter-chip.filter-chip--selected[href]:focus-visible:after,
button.filter-chip[aria-pressed="true"]:not(
        [disabled],
        [aria-disabled="true"]
    ):focus-visible:after,
button.filter-chip[aria-pressed="true"][href]:focus-visible:after {
    background-color: var(--color-state-layer-focus-on-strong);
}

a.filter-chip--selected:not([disabled], [aria-disabled="true"]):active:after,
a.filter-chip--selected[href]:active:after,
button.filter-chip.filter-chip--selected:not(
        [disabled],
        [aria-disabled="true"]
    ):active:after,
button.filter-chip.filter-chip--selected[href]:active:after,
button.filter-chip[aria-pressed="true"]:not(
        [disabled],
        [aria-disabled="true"]
    ):active:after,
button.filter-chip[aria-pressed="true"][href]:active:after {
    background-color: var(--color-state-layer-pressed-on-strong);
}

button.filter-chip--animated.filter-chip--selected,
button.filter-chip--animated[aria-pressed="true"] {
    animation-duration: var(--motion-duration-medium-2);
    transition: color var(--motion-duration-instant)
        var(--motion-easing-standard);
}

button.filter-chip[aria-expanded="false"]:active .filter-chip__trailing {
    animation: chevron-bounce-close var(--motion-duration-medium-1)
        var(--motion-easing-standard);
    rotate: 180deg;
}

button.filter-chip[aria-expanded="false"] .filter-chip__trailing {
    rotate: 0deg;
    transition: none;
}

button.filter-chip[aria-expanded="true"]:active .filter-chip__trailing {
    animation: chevron-bounce-open var(--motion-duration-medium-1)
        var(--motion-easing-standard) var(--motion-duration-short-1);
    rotate: 0deg;
}

button.filter-chip[aria-expanded="true"] .filter-chip__trailing {
    rotate: 180deg;
    transition: none;
}

.filter-chip__text {
    overflow: hidden;
    padding: var(--spacing-75) 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}