:root {
    --swiper-navigation-size: 44px;
    /*
    --swiper-navigation-top-offset: 50%;
    --swiper-navigation-sides-offset: 4px;
    --swiper-navigation-color: var(--swiper-theme-color);
    */
}

.swiper-button-prev,
.swiper-button-next {
    position: absolute;
    width: var(--swiper-navigation-size);
    height: var(--swiper-navigation-size);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color));

    &.swiper-button-disabled {
        opacity: 0.35;
        cursor: auto;
        pointer-events: none;
    }

    &.swiper-button-hidden {
        opacity: 0;
        cursor: auto;
        pointer-events: none;
    }

    .swiper-navigation-disabled & {
        display: none !important;
    }

    svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transform-origin: center;
        fill: currentColor;
        pointer-events: none;
    }
}

.swiper-button-lock {
    display: none;
}

.swiper-button-prev,
.swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
}

.swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;

    .swiper-navigation-icon {
        transform: rotate(180deg);
    }
}

.swiper-button-next {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto;
}

.swiper-horizontal {

    .swiper-button-prev,
    .swiper-button-next,
    ~.swiper-button-prev,
    ~.swiper-button-next {
        top: var(--swiper-navigation-top-offset, 50%);
        margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
        margin-left: 0;
    }

    .swiper-button-prev,
    &~.swiper-button-prev,
    &.swiper-rtl .swiper-button-next,
    &.swiper-rtl~.swiper-button-next {
        left: var(--swiper-navigation-sides-offset, 4px);
        right: auto;
    }

    .swiper-button-next,
    &~.swiper-button-next,
    &.swiper-rtl .swiper-button-prev,
    &.swiper-rtl~.swiper-button-prev {
        right: var(--swiper-navigation-sides-offset, 4px);
        left: auto;
    }

    .swiper-button-prev,
    &~.swiper-button-prev,
    &.swiper-rtl .swiper-button-next,
    &.swiper-rtl~.swiper-button-next {
        .swiper-navigation-icon {
            transform: rotate(180deg);
        }
    }

    &.swiper-rtl .swiper-button-prev,
    &.swiper-rtl~.swiper-button-prev {
        .swiper-navigation-icon {
            transform: rotate(0deg);
        }
    }
}

.swiper-vertical {

    .swiper-button-prev,
    .swiper-button-next,
    ~.swiper-button-prev,
    ~.swiper-button-next {
        left: var(--swiper-navigation-top-offset, 50%);
        right: auto;
        margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
        margin-top: 0;
    }

    .swiper-button-prev,
    ~.swiper-button-prev {
        top: var(--swiper-navigation-sides-offset, 4px);
        bottom: auto;

        .swiper-navigation-icon {
            transform: rotate(-90deg);
        }
    }

    .swiper-button-next,
    ~.swiper-button-next {
        bottom: var(--swiper-navigation-sides-offset, 4px);
        top: auto;

        .swiper-navigation-icon {
            transform: rotate(90deg);
        }
    }
}