@ebay/skin
Version:
Skin - CSS modules that represent the brand eBay
50 lines (49 loc) • 1.33 kB
CSS
.chip {
align-items: center;
background-color: var(--color-background-strong);
border-radius: var(--border-radius-50);
box-sizing: border-box;
color: var(--color-foreground-on-strong);
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;
vertical-align: bottom;
}
.chip__text {
overflow: hidden;
padding: var(--spacing-75) 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.chip button.chip__button {
align-items: center;
background-color: initial;
border: none;
border-radius: 50px;
box-sizing: border-box;
color: var(--color-foreground-on-strong);
display: flex;
flex-shrink: 0;
height: var(--spacing-300);
justify-content: center;
line-height: 0;
margin-inline-end: -8px;
padding: 0;
width: var(--spacing-300);
}
.chip button.chip__button:focus-visible {
background-color: var(--state-layer-focus);
outline-color: var(--color-foreground-on-strong);
outline-offset: -2px;
outline-style: solid;
outline-width: 2px;
}
.chip button.chip__button:hover {
background-color: var(--state-layer-hover);
}