/* Halbkreis-Pfeile am linken/rechten Rand eines Sliders.
   Ein Kreis, der zum größten Teil aus dem Bildrand herausragt; sichtbar
   bleibt nur ein Segment mit dem Chevron. Größe/Farben pro Element über
   --side-arrow-* im :where()-Block des Elements. Verhalten bleibt im
   Element-JS, hier nur das Aussehen. Das Elternelement braucht
   position:relative und overflow:hidden (oder clip). */
:where(.side-arrow) {
    --_side-arrow-size: var(--side-arrow-size, clamp(110px, 15.6vw, 300px));
    /* Anteil des Kreises, der außerhalb liegt (100% - sichtbarer Teil) */
    --_side-arrow-hidden: var(--side-arrow-hidden, 72%);
    --_side-arrow-bg: var(--side-arrow-bg, var(--color-primary));
    --_side-arrow-color: var(--side-arrow-color, var(--color-white));
    --_side-arrow-icon-size: var(--side-arrow-icon-size, clamp(14px, 1.25vw, 24px));
}

.side-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    width: var(--_side-arrow-size);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--_side-arrow-bg);
    color: var(--_side-arrow-color);
    cursor: pointer;
    transition: filter 200ms ease;
}

.side-arrow--prev {
    left: 0;
    transform: translate(calc(var(--_side-arrow-hidden) * -1), -50%);
}

.side-arrow--next {
    right: 0;
    transform: translate(var(--_side-arrow-hidden), -50%);
}

/* Chevron mittig im sichtbaren Segment */
.side-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    width: var(--_side-arrow-icon-size);
    aspect-ratio: 1;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='15 5 8 12 15 19' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='15 5 8 12 15 19' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.side-arrow--prev::before {
    right: calc((100% - var(--_side-arrow-hidden)) / 2);
    transform: translate(50%, -50%);
}

.side-arrow--next::before {
    left: calc((100% - var(--_side-arrow-hidden)) / 2);
    transform: translate(-50%, -50%) scaleX(-1);
}

.side-arrow:hover {
    filter: brightness(1.15);
}

.side-arrow:focus-visible {
    outline: 2px solid var(--_side-arrow-bg);
    outline-offset: 3px;
}