category-carousel {
    --swiper-scrollbar-drag-bg-color: var(--theme-color-black);
    --swiper-scrollbar-bg-color: var(--theme-color-grey-3);
    --swiper-scrollbar-border-radius: 2px;
    --swiper-scrollbar-size: 0.125rem;

    &.category-carousel--yman {
        --swiper-scrollbar-drag-bg-color: var(--theme-color-yamamay-man);
    }

    .category-carousel-slide-wrapper:not([id^="swiper-wrapper"]) {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .swiper-scrollbar {
        max-width: 40vw;
        background: var(--theme-color-grey-3, #0000001a);
        &.swiper-scrollbar-horizontal,
        .swiper-horizontal > & {
            position: relative;
            inset: unset;
            width: 100%;
            cursor: pointer;
        }
        .swiper-scrollbar-drag {
            background: var(--swiper-scrollbar-drag-bg-color, var(--theme-color-yamamay));
        }
    }

    .category-carousel__controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;

        .swiper-button-prev,
        .swiper-button-next {
            position: static;
            width: 1.5rem;
            height: 1.5rem;
            margin: 0;
            cursor: pointer;
            color: var(--carousel-control-color, #000);

            &::after {
                display: none;
            }

            svg {
                width: 100%;
                height: 100%;
            }
        }
    }
}

.category-carousel__slide {
    display: flex;
    flex-direction: column;
    height: 100%;

    &:nth-child(n + 5):not([aria-label]) {
        display: none;
    }
}