/*
 * A bar of links that scrolls sideways on one line (views: .mdf-scroll-nav around the list)
 *
 * The fades lie on top of the list instead of masking it: a mask would also cut what opens from it,
 * like the mega menu of the categories. They take the colour of what is behind the bar.
 */

.mdf-scroll-nav {
    --mdf-scroll-nav-bg: var(--bs-body-bg);
    position: relative;
    min-width: 0;
}

.mdf-scroll-nav-tertiary {
    --mdf-scroll-nav-bg: var(--bs-tertiary-bg);
}

/* The tabs of a brand, a little closer: all twelve fit in the widest layout of My Account */

.mdf-scroll-nav-tertiary > .nav-underline {
    --bs-nav-underline-gap: .875rem;
}

.mdf-scroll-nav > :first-child {
    scrollbar-width: none;
}

.mdf-scroll-nav > :first-child::-webkit-scrollbar {
    display: none;
}

.mdf-scroll-nav::before,
.mdf-scroll-nav::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 4rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
}

.mdf-scroll-nav::before {
    left: 0;
    background: linear-gradient(to right, var(--mdf-scroll-nav-bg) 25%, transparent);
}

.mdf-scroll-nav::after {
    right: 0;
    background: linear-gradient(to left, var(--mdf-scroll-nav-bg) 25%, transparent);
}

.mdf-scroll-nav.more-left::before,
.mdf-scroll-nav.more-right::after {
    opacity: 1;
}

/* Arrows for a mouse, which has no other way along the bar: a finger just swipes */

.mdf-scroll-nav-arrow {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 2rem;
    padding: 0;
    color: var(--bs-body-color);
    background: none;
    border: 0;
}

.mdf-scroll-nav-arrow.left {
    left: 0;
}

.mdf-scroll-nav-arrow.right {
    right: 0;
}

@media (hover: hover) {
    .more-left > .mdf-scroll-nav-arrow.left,
    .more-right > .mdf-scroll-nav-arrow.right {
        display: block;
    }
}