:root {
    --slider-arrow-size: 42px;
    --slider-arrow-icon-size: 22px;
    --slider-arrow-color: var(--color-primary);
    --slider-arrow-background: var(--color-white);
    --slider-arrow-transition-duration: 0.25s;
}

.slider-arrow {
    box-sizing: border-box;
    width: var(--slider-arrow-size);
    height: var(--slider-arrow-size);
    min-width: var(--slider-arrow-size);
    min-height: var(--slider-arrow-size);
    flex: 0 0 var(--slider-arrow-size);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--slider-arrow-color);
    background: var(--slider-arrow-background);
    border: 1px solid var(--slider-arrow-color);
    border-radius: 50%;
    cursor: pointer;
    transition:
        color var(--slider-arrow-transition-duration) ease,
        background-color var(--slider-arrow-transition-duration) ease,
        border-color var(--slider-arrow-transition-duration) ease,
        box-shadow var(--slider-arrow-transition-duration) ease,
        opacity var(--slider-arrow-transition-duration) ease;
}

.slider-arrow::before {
    width: var(--slider-arrow-icon-size);
    height: var(--slider-arrow-icon-size);
    display: block;
    content: "";
    background-color: currentColor;
    -webkit-mask: url("../icons/arrows/arrow-right-blue.svg") center / contain no-repeat;
    mask: url("../icons/arrows/arrow-right-blue.svg") center / contain no-repeat;
}

.slider-arrow--prev::before {
    transform: rotate(180deg);
}

.slider-arrow > img {
    display: none;
}

.slider-arrow--overlay {
    --slider-arrow-size: 44px;
}

.slider-arrow--transparent {
    --slider-arrow-size: 44px;
    --slider-arrow-background: transparent;
    background-color: transparent;
}

.slider-arrow:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .slider-arrow:not(:disabled):not(.swiper-button-disabled):hover {
        color: var(--color-white);
        background-color: var(--slider-arrow-color);
        border-color: var(--slider-arrow-color);
        box-shadow: 0 6px 16px rgba(32, 44, 70, 0.14);
    }

    .slider-arrow--transparent:not(:disabled):not(.swiper-button-disabled):hover {
        color: #202c46;
        background-color: transparent;
        border-color: #202c46;
        box-shadow: 0 4px 12px rgba(32, 44, 70, 0.12);
    }
}

.slider-arrow:not(:disabled):not(.swiper-button-disabled):active {
    color: var(--color-white);
    background-color: var(--slider-arrow-color);
    border-color: var(--slider-arrow-color);
    box-shadow: 0 2px 8px rgba(32, 44, 70, 0.18);
}

.slider-arrow--transparent:not(:disabled):not(.swiper-button-disabled):active {
    color: #202c46;
    background-color: transparent;
    border-color: #202c46;
    box-shadow: 0 2px 8px rgba(32, 44, 70, 0.14);
}

.slider-arrow--transparent:disabled,
.slider-arrow--transparent.swiper-button-disabled,
.slider-arrow--transparent[aria-disabled="true"] {
    background-color: transparent;
}

.slider-arrow:disabled,
.slider-arrow.swiper-button-disabled,
.slider-arrow[aria-disabled="true"] {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}

@media (pointer: coarse) {
    :root {
        --slider-arrow-size: 44px;
    }
}


@media (prefers-reduced-motion: reduce) {
    .slider-arrow {
        transition-duration: 0.01ms;
    }
}