@ebay/skin/dist/selection-chip/selection-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%;
    }
}

.selection-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-50);
    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;
}

.selection-chip:active {
    transform: scale(0.97);
}

.selection-chip {
    overflow: hidden;
    position: relative;
}

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

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

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

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

.selection-chip--animated .selection-chip__trailing {
    transition: rotate var(--motion-duration-medium-3)
        var(--motion-easing-standard);
}

.selection-chip__trailing {
    rotate: -225deg;
}

.selection-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;
}

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

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

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

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

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

.selection-chip[aria-pressed="true"] .selection-chip__trailing {
    rotate: 0deg;
}

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