.showcase-filter-tabs {
    --gap: 0vw;
    --align-items: flex-start
}

@media(min-width: 720px) {
    .showcase-filter-tabs {
        --gap:1.875vw;
        --align-items: center
    }
}

@media(min-width: 1281px) {
    .showcase-filter-tabs {
        --gap:1.25vw;
        --align-items: center
    }
}

@media(min-width: 2400px) {
    .showcase-filter-tabs {
        --gap:30px;
        --align-items: center
    }
}

.showcase-filter-tabs {
    display: flex;
    align-items: var(--align-items);
    width: 100%;
    position: relative
}

.showcase-filter-tabs:after {
    --display: block
}

@media(min-width: 720px) {
    .showcase-filter-tabs:after {
        --display:none
    }
}

@media(min-width: 1281px) {
    .showcase-filter-tabs:after {
        --display:none
    }
}

@media(min-width: 2400px) {
    .showcase-filter-tabs:after {
        --display:none
    }
}

.showcase-filter-tabs:after {
    content: "";
    display: var(--display);
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    background-color: var(--color-paper-white);
    height: 100%;
    z-index: 1;
    box-shadow: 0 0 calc(var(--main-layout-side-padding)/1) calc(var(--main-layout-side-padding)*2) var(--color-paper-white)
}

.showcase-filter-tabs__swiper {
    --justify-content: flex-start
}

@media(min-width: 720px) {
    .showcase-filter-tabs__swiper {
        --justify-content:center
    }
}

@media(min-width: 1281px) {
    .showcase-filter-tabs__swiper {
        --justify-content:center
    }
}

@media(min-width: 2400px) {
    .showcase-filter-tabs__swiper {
        --justify-content:center
    }
}

.showcase-filter-tabs__swiper {
    width: 100%;
    overflow: visible
}

.showcase-filter-tabs__swiper>.swiper-wrapper {
    justify-content: var(--justify-content)
}

.showcase-filter-tabs__swiper-slide {
    width: auto;
    padding: 0 calc(var(--gap)/2) 0
}

.showcase-filter-tabs__swiper-slide:first-child {
    padding-left: var(--main-layout-side-padding)
}

.showcase-filter-tabs__swiper-slide:last-child {
    padding-right: calc(var(--main-layout-side-padding)*2)
}

.showcase-filter-tabs__item {
    --side-padding: 3.7333333333vw;
    --height: 10.6666666667vw;
    --gap: 2.1333333333vw
}

@media(min-width: 720px) {
    .showcase-filter-tabs__item {
        --side-padding:1.5625vw;
        --height: 3.59375vw;
        --gap: 0.625vw
    }
}

@media(min-width: 1281px) {
    .showcase-filter-tabs__item {
        --side-padding:1.0416666667vw;
        --height: 2.3958333333vw;
        --gap: 0.4166666667vw
    }
}

@media(min-width: 2400px) {
    .showcase-filter-tabs__item {
        --side-padding:25px;
        --height: 57.5px;
        --gap: 10px
    }
}

.showcase-filter-tabs__item {
    padding: 0 var(--side-padding);
    height: var(--height);
    display: flex;
    align-items: center;
    gap: 0 var(--gap);
    position: relative;
    border-radius: var(--height)
}

.showcase-filter-tabs__item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-mint);
    transform: scale(0);
    opacity: .3;
    transition: transform .2s;
    border-radius: inherit
}

.showcase-filter-tabs__item>span {
    position: relative
}

.showcase-filter-tabs__item_active {
    background-color: var(--color-mint);
    pointer-events: none
}

.showcase-filter-tabs__item:focus:before,.showcase-filter-tabs__item:hover:before {
    transform: scale(1)
}

.showcase-filter-tabs__item-count {
    --height: 5.3333333333vw;
    --side-padding: 2.6666666667vw
}

@media(min-width: 720px) {
    .showcase-filter-tabs__item-count {
        --height:1.5625vw;
        --side-padding: 0.78125vw
    }
}

@media(min-width: 1281px) {
    .showcase-filter-tabs__item-count {
        --height:1.0416666667vw;
        --side-padding: 0.5208333333vw
    }
}

@media(min-width: 2400px) {
    .showcase-filter-tabs__item-count {
        --height:25px;
        --side-padding: 12.5px
    }
}

.showcase-filter-tabs__item-count {
    display: flex;
    align-items: center;
    height: var(--height);
    border-radius: var(--height);
    background-color: var(--color-mint);
    padding: 0 var(--side-padding)
}