.categories-selector__wrapper {
    position: sticky;
    top: 0;
    z-index: var(--theme-z-index-header);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100vw;
    min-height: 56px;
    margin-bottom: var(--space-x3);
    background-color: var(--theme-body-color);
    border-bottom: 1px solid var(--theme-divider-20);

    /* Same transition (transition-duration & transition-timing-function) as header's .slide-down-leave-active */
    transition: top 0.3s ease-in;

    /* Accelerate the transition since the header "leave" transition is slightly faster */
    transition-delay: -30ms;
}

.categories-selector__categories {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex: 1;
    padding: 0 var(--space-x3);
    gap: var(--space-x3);
    overflow-x: auto;
}

/* Gradient overlays */
.order-online-menu-selector {
    position: relative;
    padding: 0 0 0 var(--theme-container-padding);
}

.categories-selector__wrapper::before,
.categories-selector__wrapper::after,
.order-online-menu-selector::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--space-x3);
    z-index: 1;
    pointer-events: none;
}

.categories-selector__wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--theme-body-color), var(--theme-body-color) 50%, transparent);
}

.order-online-menu-selector::after {
    right: calc(-1 * var(--space-x3));
    background: linear-gradient(to right, var(--theme-body-color), var(--theme-body-color) 50%, transparent);
}

.categories-selector__wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--theme-body-color), var(--theme-body-color) 50%, transparent);
}

/* Allow the Category Selector to vertically stack underneath the site header when Site Header is visible */
.is-site-header-visible .categories-selector__wrapper {
    top: var(--header-height, 0px);

    /* Same transition (transition-duration & transition-timing-function) as header's .slide-down-enter-active */
    transition: top 0.3s ease-out;

    /* Delay the transition since the header "enter" transition is slightly slower */
    transition-delay: 30ms;
}

@media (min-width: 700px) {
    .categories-selector__wrapper {
        margin-left: calc(var(--theme-container-padding) * -1);
    }
}

.categories-selector__wrapper > .categories-selector__categories {
    transition: opacity 200ms ease-in 100ms;
}

.categories-selector__wrapper.fade > .categories-selector__categories {
    opacity: 0;
    transition: opacity 0ms ease-out;
}

.categories-selector__wrapper .ui-carousel__navigation--overlay {
    margin-top: calc(var(--space) * -1);
}

.categories-selector__wrapper .categories-selector__item {
    position: relative;
    padding: var(--space-x2) 0;
    font: var(--theme-paragraph-30-medium);
    color: var(--theme-text-20);
    letter-spacing: var(--theme-paragraph-30-letter-spacing);
    white-space: nowrap;
    cursor: pointer;
}

.categories-selector__wrapper .categories-selector__item--selected {
    color: var(--theme-text-10);
}

.categories-selector__item--selected::after {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 2px;
    content: '';
    background: var(--theme-text-10);
}