@ebay/skin
Version:
Skin - CSS modules that represent the brand eBay
73 lines (72 loc) • 2.05 kB
CSS
:root {
--state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
--state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
}
summary.details__summary {
border-radius: var(--expand-btn-border-radius, var(--border-radius-50));
color: var(
--details-summary-foreground-color,
var(--color-foreground-primary)
);
overflow: hidden;
position: relative;
}
summary.details__summary:after {
background-color: var(--color-state-layer-neutral);
content: "";
inset: 0;
pointer-events: none;
position: absolute;
}
summary.details__summary:not([disabled], [aria-disabled="true"]):hover:after,
summary.details__summary[href]:hover:after {
background-color: var(--color-state-layer-hover);
}
summary.details__summary:not(
[disabled],
[aria-disabled="true"]
):focus-visible:after,
summary.details__summary[href]:focus-visible:after {
background-color: var(--color-state-layer-focus);
}
summary.details__summary:not([disabled], [aria-disabled="true"]):active:after,
summary.details__summary[href]:active:after {
background-color: var(--color-state-layer-pressed);
}
summary.details__summary {
align-items: center;
box-sizing: border-box;
display: inline-flex;
font-size: var(--font-size-body);
font-weight: var(--font-weight-600);
gap: var(--spacing-100);
list-style-position: inside;
list-style-type: none;
padding: 12px 8px;
}
summary.details__summary:before {
content: none;
}
summary.details__summary::-webkit-details-marker {
display: none;
}
summary.details__summary--center {
justify-content: center;
width: 100%;
}
summary.details__summary--small {
font-size: var(--font-size-small);
padding: 4px 8px;
}
span.details__icon[hidden] {
display: inline-flex;
}
details.details[open] span.details__icon {
transform: rotate(180deg);
}
details.details[open] summary.details__summary:before {
content: none;
}
details.details summary:focus:not(:focus-visible) {
outline: none;
}