#categorySliderPrimary {
    margin-top: 8px;
    margin-left: 16px;
    padding-right: 16px;
    height: 43px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: scroll;
    overflow-y: hidden;

    // Hide scrollbar
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
        display: none;
    }

    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    .primary-category-item {
        position: relative;
        height: 43px;

        .primary-category-item-border,
        .primary-category-item-bg,
        .primary-category-item-spike-border,
        .primary-category-item-spike-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 8px;
            // Reduce height by 5px at the bottom
            clip-path: inset(0 0 5px 0 round 0 0 8px 8px);
        }

        .primary-category-item-content {
            position: relative;
            white-space: nowrap;
            background-color: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border-radius: 8px;
            padding: 12px 8px;
            height: 38px;
            font-size: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: rgba(255, 255, 255, 1);
        }

        &.active {
            .primary-category-item-border,
            .primary-category-item-spike-border {
                background: 
                    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.7) 100%),
                    linear-gradient(104deg, #00A759 -2.97%, #38C684 100%);
            }

            .primary-category-item-bg,
            .primary-category-item-spike-bg {
                background: linear-gradient(104deg, #00A759 -2.97%, #38C684 100%);
            }

            .primary-category-item-bg {
                // Inside of the border by 2px
                clip-path: inset(2px 2px 7px 2px round 8px);
            }

            .primary-category-item-spike-border {
                clip-path: polygon(
                calc(50% - 5px) calc(100% - 5px),
                calc(50% + 5px) calc(100% - 5px),
                50% 100%
                );
            }

            .primary-category-item-spike-bg {
                clip-path: polygon(
                calc(50% - 4px) calc(100% - 7px),
                calc(50% + 4px) calc(100% - 7px),
                50% calc(100% - 3px)
                );
            }

            .primary-category-item-content {
                background: transparent;
                backdrop-filter: unset;
                -webkit-backdrop-filter: unset;
                color: #fff;
            }
        }

        &.disabled {
            .primary-category-item-content {
                color: rgba(255, 255, 255, 0.5);
            }
        }
    }
}

.category-slider-secondary {
    display: flex;
    flex-direction: row;
    width: 100vw;
    padding-top: 8px;
    padding-left: 16px;
    align-items: flex-start;
}

#categorySliderSecondaryBox {
    margin-right: 12px;
    flex-grow: 1;
    
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 12px;
    padding-right: 0px;
    overflow: hidden;
    
    display: flex;
    flex-direction: column;
    gap: 8px;

    #categorySliderSecondaryList {
        display: flex;
        flex-direction: row;
        gap: 8px;
        padding-right: 12px;

        overflow-x: scroll;
        overflow-y: hidden;

        // Hide scrollbar
        scrollbar-width: none;
        -ms-overflow-style: none;
        &::-webkit-scrollbar {
            display: none;
        }

        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;

        .secondary-category-item {
            height: 21px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            gap: 3px;
            white-space: nowrap;
            color: rgba(255, 255, 255, 0.85);
            font-size: 12px;
            line-height: 16px;

            &.active {
                font-weight: bold;

                .secondary-category-highlight {
                    height: 2px;
                    background: #fff;       
                    border-radius: 4px;
                }
            }
        }
    }

    #categorySliderLeaf {
        display: flex;
        flex-direction: row;
        gap: 8px;
        padding-right: 12px;
        height: 48px;

        // Hide scrollbar
        scrollbar-width: none;
        -ms-overflow-style: none;
        &::-webkit-scrollbar {
            display: none;
        }

        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;

        overflow-x: scroll;
        overflow-y: hidden;

        .category-product {
            aspect-ratio: 1/1;
            min-width: 48px;
            min-height: 48px;
            width: 48px;
            height: 48px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            background-color: #fff;

            .category-product-image {
                aspect-ratio: 1/1;
                min-width: 48px;
                min-height: 48px;
                width: 48px;
                height: 48px;
                object-fit: contain;
                position: absolute;
                background-color: #fff;
            }

            .category-product-image-mask {
                aspect-ratio: 1/1;
                min-width: 48px;
                min-height: 48px;
                width: 48px;
                height: 48px;
                position: absolute;
                mask-image: linear-gradient(
                    180deg, rgba(0, 0, 0, 0.00) 55%,
                    rgba(0, 0, 0, 0.70) 80%);
                background-color: rgba(0, 0, 0, 0.70);
            }

            .category-product-text {
                position: absolute;
                bottom: 0;
                padding: 4px;
                max-width: 48px;
                color: #FFF;
                font-size: 12px;
                font-weight: bold;
                line-height: 14px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
        }
    }
}