@ebay/skin/dist/tabs/tabs.css

Skin - CSS modules that represent the brand eBay

span.fake-tabs,
span.tabs {
    display: inline-block;
}

div.tabs__items[role="tablist"],
ul.fake-tabs__items {
    display: flex;
    flex-wrap: wrap;
    font-size: var(--font-size-body);
    gap: var(--spacing-50);
    margin: 0;
    margin-inline-start: calc(0px - var(--spacing-200));
}

.fake-tabs--large ul.fake-tabs__items,
.tabs--large div.tabs__items[role="tablist"] {
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-600);
}

ul.fake-tabs__items {
    list-style: none;
    padding: 0;
}

div.tabs__item[role="tab"] {
    cursor: default;
}

div.tabs__item[role="tab"],
li.fake-tabs__item {
    display: inline-block;
    position: relative;
    -webkit-tap-highlight-color: var(--color-background-secondary);
}

li.fake-tabs__item > a {
    text-decoration: none;
}

div.tabs__item[role="tab"],
li.fake-tabs__item > a {
    color: var(--tabs-item-foreground-color, var(--color-foreground-secondary));
    display: inline-block;
    padding: var(--spacing-150) var(--spacing-200);
}

div.tabs__item[role="tab"]:after,
li.fake-tabs__item > a:after {
    background-color: initial;
    border-radius: 6px;
    content: "";
    display: block;
    height: 2px;
    inset: auto var(--spacing-200) 0;
    position: absolute;
}

div.tabs__item[role="tab"][aria-selected="true"],
li.fake-tabs__item > a[aria-current] {
    color: var(
        --tabs-item-selected-foreground-color,
        var(--color-foreground-primary)
    );
}

div.tabs__item[role="tab"][aria-selected="true"]:after,
li.fake-tabs__item > a[aria-current]:after {
    background-color: currentColor;
}

div.tabs__item[role="tab"]:focus:not(:focus-visible),
li.fake-tabs__item a:focus:not(:focus-visible) {
    outline: none;
}

div.tabs__item[role="tab"]:not([aria-selected="true"])[aria-disabled="true"],
div.tabs__item[role="tab"]:not(
        [aria-selected="true"]
    )[aria-disabled="true"]:focus,
div.tabs__item[role="tab"]:not(
        [aria-selected="true"]
    )[aria-disabled="true"]:hover,
li.fake-tabs__item > a:not([aria-current]):not([href]),
li.fake-tabs__item > a:not([aria-current]):not([href]):focus,
li.fake-tabs__item > a:not([aria-current]):not([href]):hover {
    color: var(--color-foreground-disabled);
}

div.tabs__item[role="tab"]:not(
        [aria-selected="true"]
    )[aria-disabled="true"]:after,
div.tabs__item[role="tab"]:not(
        [aria-selected="true"]
    )[aria-disabled="true"]:focus:after,
div.tabs__item[role="tab"]:not(
        [aria-selected="true"]
    )[aria-disabled="true"]:hover:after,
li.fake-tabs__item > a:not([aria-current]):not([href]):after,
li.fake-tabs__item > a:not([aria-current]):not([href]):focus:after,
li.fake-tabs__item > a:not([aria-current]):not([href]):hover:after {
    background-color: initial;
}

div.tabs__item[role="tab"]:not([aria-selected="true"]):focus,
div.tabs__item[role="tab"]:not([aria-selected="true"]):hover,
li.fake-tabs__item > a:not([aria-current]):focus,
li.fake-tabs__item > a:not([aria-current]):hover {
    color: var(--color-foreground-secondary);
}

div.tabs__item[role="tab"]:not([aria-selected="true"]):focus:after,
div.tabs__item[role="tab"]:not([aria-selected="true"]):hover:after,
li.fake-tabs__item > a:not([aria-current]):focus:after,
li.fake-tabs__item > a:not([aria-current]):hover:after {
    background-color: currentColor;
}

.fake-tabs__cell,
.tabs__cell {
    margin: var(--spacing-200) 0;
}