.tickingLine {
    --shadowOffsetY: 4px;
    --shadowRadius: 16px;
    --itemsGap: 6px;
}

@media (min-width: 768px) {
    .tickingLine {
        --itemsGap: 8px;
    }
}

.tickingLine > .inner {
    position: relative;
}

.tickingLine .tickingSlider {
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0) 0%,
        rgb(0, 0, 0) calc(var(--innerPx) * 2),
        rgb(0, 0, 0) calc(100% - var(--innerPx) * 2),
        rgba(0, 0, 0, 0) 100%
    );
    padding-block: calc(var(--shadowOffsetY) + var(--shadowRadius));
    margin-block: calc((var(--shadowOffsetY) + var(--shadowRadius)) * -1);
    margin-inline: calc(var(--innerPx) * -1);
}

@media (hover: hover) {
    .tickingLine.prev:hover .tickingLineNavButton.prev {
        opacity: 1;
        pointer-events: auto;
    }

    .tickingLine.next:hover .tickingLineNavButton.next {
        opacity: 1;
        pointer-events: auto;
    }
}

.tickingLineNavButton {
    cursor: pointer;
    background: hsl(from var(--color-bg) h s l / 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    aspect-ratio: 1/1;
    position: absolute;
    inset-block-start: 50%;
    z-index: 10;
    inset-inline-start: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    border-radius: 50%;
    backdrop-filter: blur(4px);
    box-shadow:
        0 4.8px 9.6px rgba(14, 14, 15, 0.04),
        0 4px 4px rgba(14, 14, 15, 0.04),
        0 1.2px 2.4px rgba(14, 14, 15, 0.04),
        0 0 2.4px rgba(0, 0, 0, 0.04);
}

@media (hover: hover) {
    .tickingLineNavButton:hover {
        background: hsl(from var(--color-light-1) h s l);
    }
}

.tickingLineNavButton:is(:active, :focus-visible) {
    background: hsl(from var(--color-light-1) h s 95% / 50%);
}

.tickingLineNavButton::before {
    content: "";
    position: absolute;
    inset: 0;
    scale: 3 3;
    border-radius: inherit;
}

.tickingLineNavButton .icon {
    width: 6px;
    height: auto;
}

.tickingLineNavButton.prev {
    scale: -1 1;
    translate: 100% -50%;
    /* margin-inline-start: calc(var(--innerPx) * -1); */
}

.tickingLineNavButton.prev .icon {
    translate: 25% 0%;
}

.tickingLineNavButton.next {
    inset-inline-end: 0;
    inset-inline-start: auto;
    translate: -100% -50%;
    /* margin-inline-end: calc(var(--innerPx) * -1); */
}

.tickingLineNavButton.prev .next {
    translate: 0% 0%;
}

.tickingLine .tickingSlider .swiper-slide {
    width: max-content;
}

.tickingLine .tickingSlider .swiper-slide:first-child .tick {
    margin-inline-start: var(--innerPx);
}

.tickingLine .tickingSlider .swiper-slide:last-child .tick {
    margin-inline-end: var(--innerPx);
}

.tickingLine .tick {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    /* min-width: 137px; */
    padding: 6px 22px;
    border-radius: 100px;
    background: var(--color-white);
    box-shadow: 0 var(--shadowOffsetY) var(--shadowRadius) rgba(0, 0, 0, 0.055);
    color: var(--color-gray-11);
    font-size: 12px;
    font-weight: 500;
    line-height: 114%;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .tickingLine .tick {
        gap: 6px;
        padding: 8px 22px;
        font-size: 14px;
    }
}