@ebay/skin/dist/segmented-buttons/segmented-buttons.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);
}
.segmented-buttons {
    border: 1px solid var(--color-border-medium);
    border-radius: var(--segmented-button-border-radius, 24px);
    max-width: 720px;
    min-width: 215px;
    padding: var(--spacing-50);
}
.segmented-buttons > ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}
.segmented-buttons > ul > li {
    display: flex;
    flex: 1;
}
.segmented-buttons > ul > li:not(:first-child) {
    margin-inline-start: var(--spacing-100);
}
.segmented-buttons__button {
    background-color: initial;
    border: none;
    border-radius: var(--btn-border-radius, 20px);
    color: var(--color-foreground-primary);
    font-family: inherit;
    font-size: var(--font-size-body);
    min-height: calc(40px - var(--spacing-50) * 2);
    padding: var(--spacing-100) var(--spacing-200);
    width: 100%;
}
.segmented-buttons--large .segmented-buttons__button {
    min-height: calc(48px - var(--spacing-50) * 2);
}
.segmented-buttons__button-cell {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
}
.segmented-buttons__button svg.icon {
    align-self: center;
}
.segmented-buttons__button svg.icon:first-child {
    margin-inline-end: 8px;
}
.segmented-buttons__button svg.icon:last-child {
    margin-inline-start: 8px;
}
.segmented-buttons__button svg.icon:only-child {
    margin: 0;
}
.segmented-buttons__button[aria-current] {
    background-color: var(--color-foreground-primary);
    color: var(--color-foreground-on-inverse);
}
.segmented-buttons__button:not([aria-current]) {
    overflow: hidden;
    position: relative;
}
.segmented-buttons__button:not([aria-current]):after {
    background-color: var(--color-state-layer-neutral);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}
.segmented-buttons__button:not([aria-current]):not(
        [disabled],
        [aria-disabled="true"]
    ):hover:after,
.segmented-buttons__button:not([aria-current])[href]:hover:after {
    background-color: var(--color-state-layer-hover);
}
.segmented-buttons__button:not([aria-current]):not(
        [disabled],
        [aria-disabled="true"]
    ):focus-visible:after,
.segmented-buttons__button:not([aria-current])[href]:focus-visible:after {
    background-color: var(--color-state-layer-focus);
}
.segmented-buttons__button:not([aria-current]):not(
        [disabled],
        [aria-disabled="true"]
    ):active:after,
.segmented-buttons__button:not([aria-current])[href]:active:after {
    background-color: var(--color-state-layer-pressed);
}