/* Tab strip overflow: one line, hidden scrollbar, edge fades + chevron. The
   wc-overflowing / wc-at-start / wc-at-end classes are toggled by js/tabs.js.
   Themeable via --wc-tabs-fade (the card background behind the strip),
   --wc-tabs-chevron-color and --wc-tabs-chevron-border. */
.wc-tabs-strip {
    position: relative;
}

.wc-tabs-strip > ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wc-tabs-strip > ul::-webkit-scrollbar {
    display: none;
}

.wc-dragging {
    cursor: grabbing;
    user-select: none;
}

.wc-tabs-fade {
    position: absolute;
    top: 0;
    bottom: 1px; /* keep the strip's bottom border visible through the fade */
    width: 56px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}

.wc-tabs-fade-left {
    left: 0;
    background: linear-gradient(90deg, var(--wc-tabs-fade, #fff) 40%, rgba(255, 255, 255, 0));
}

.wc-tabs-fade-right {
    right: 0;
    background: linear-gradient(270deg, var(--wc-tabs-fade, #fff) 40%, rgba(255, 255, 255, 0));
}

.wc-overflowing:not(.wc-at-start) > .wc-tabs-fade-left {
    opacity: 1;
}

.wc-overflowing:not(.wc-at-end) > .wc-tabs-fade-right {
    opacity: 1;
}

.wc-tabs-chevron {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--wc-tabs-chevron-border, #E7E9ED);
    background: var(--wc-tabs-chevron-bg, var(--wc-tabs-fade, #fff));
    color: var(--wc-tabs-chevron-color, #A9791F);
    cursor: pointer;
    font-size: 0;                 /* hide the fallback ‹/› glyph; the arrowhead is drawn below */
    line-height: 0;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px -2px rgba(15, 19, 25, .2);
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

/* Arrowhead drawn from two borders of a rotated box so it stays crisp and perfectly
   centered at any size, independent of the button's font/glyph metrics. */
.wc-tabs-chevron::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.wc-tabs-chevron-left {
    left: 10px;
}

.wc-tabs-chevron-left::before {
    transform: rotate(135deg);   /* points left */
    margin-left: 3px;            /* optical-center the L-shape's tip */
}

.wc-tabs-chevron-right {
    right: 10px;
}

.wc-tabs-chevron-right::before {
    transform: rotate(-45deg);   /* points right */
    margin-right: 3px;
}

.wc-tabs-chevron:hover {
    background: var(--wc-tabs-chevron-hover-bg, #F4F5F7);
    border-color: var(--wc-tabs-chevron-color, #A9791F);
    color: var(--wc-tabs-chevron-color, #A9791F);
}

.wc-tabs-chevron:active {
    background: var(--wc-tabs-chevron-border, #E7E9ED);
}

.wc-tabs-chevron:focus-visible {
    outline: 2px solid var(--wc-tabs-chevron-color, #A9791F);
    outline-offset: 1px;
}

.wc-overflowing:not(.wc-at-start) > .wc-tabs-chevron-left {
    display: flex;
}

.wc-overflowing:not(.wc-at-end) > .wc-tabs-chevron-right {
    display: flex;
}