@ebay/skin
Version:
Skin - CSS modules that represent the brand eBay
51 lines (45 loc) • 1.18 kB
CSS
.chip {
align-items: center;
background-color: var(--color-background-tertiary);
border-radius: var(--spacing-400);
color: var(--color-foreground-primary);
display: inline-flex;
font-size: var(--font-size-default);
gap: 2px;
justify-content: space-between;
max-width: 296px;
min-height: var(--spacing-250);
min-width: 32px;
padding: 0 var(--spacing-150);
}
.chip__text {
overflow: hidden;
padding: var(--spacing-75) 0;
text-overflow: ellipsis;
white-space: nowrap;
}
button.chip__button {
background-color: initial;
border: none;
border-radius: 50px;
box-sizing: border-box;
flex-shrink: 0;
height: var(--spacing-300);
line-height: 0;
margin-inline-end: -8px;
padding: 0;
width: var(--spacing-300);
}
button.chip__button:focus-visible {
background-color: var(--state-layer-focus);
outline-color: var(--color-state-focus-stroke);
outline-offset: -2px;
outline-style: solid;
outline-width: 2px;
}
button.chip__button:hover {
background-color: var(--state-layer-hover);
}
button.chip__button > svg {
fill: var(--color-foreground-on-primary);
}