/*
================================================

Space Vanta Theme 1.0

Module:
Immediate Trust Bridge

File:
public/trust-bridge/cs/navigation.css

Version:
1.0

Responsibility:
Spatial Previous / Next Controls

================================================
*/

.sv-trust-bridge-player__controls {

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    width:
        min(1120px, 100%);

    height:
        0;

    z-index:
        20;

    transform:
        translate3d(-50%, -50%, 0);

    pointer-events:
        none;

}

.sv-trust-bridge-player__control {

    position:
        absolute;

    top:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    border:
        1px solid rgba(83, 109, 134, 0.24);

    border-radius:
        50%;

    background:
        rgba(243, 240, 232, 0.54);

    color:
        var(--sv-trust-blue-deep);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    box-shadow:
        0 10px 28px rgba(38, 44, 48, 0.10),
        inset 0 0 0 1px rgba(255, 255, 255, 0.34);

    cursor:
        pointer;

    pointer-events:
        auto;

    transition:
        transform 260ms ease,
        background-color 260ms ease,
        border-color 260ms ease,
        box-shadow 260ms ease;

}

.sv-trust-bridge-player__control--prev {

    left:
        1.2%;

}

.sv-trust-bridge-player__control--next {

    left:
        calc(60.7% - 38px);

}

.sv-trust-bridge-player__control::before {

    content:
        "";

    width:
        8px;

    height:
        8px;

    border-top:
        1px solid currentColor;

    border-right:
        1px solid currentColor;

}

.sv-trust-bridge-player__control--prev::before {

    transform:
        rotate(-135deg);

    margin-left:
        3px;

}

.sv-trust-bridge-player__control--next::before {

    transform:
        rotate(45deg);

    margin-right:
        3px;

}

@media (hover: hover) {

    .sv-trust-bridge-player__control:hover {

        transform:
            scale(1.08);

        background:
            rgba(255, 255, 255, 0.82);

        border-color:
            rgba(83, 109, 134, 0.40);

        box-shadow:
            0 13px 32px rgba(38, 44, 48, 0.14),
            inset 0 0 0 1px rgba(255, 255, 255, 0.44);

    }

}

.sv-trust-bridge-player__control:focus-visible {

    outline:
        1px solid var(--sv-trust-blue);

    outline-offset:
        4px;

}

@media (max-width: 767px) {

    .sv-trust-bridge-player__controls {

        top:
            19%;

        width:
            min(91%, 390px);

        height:
            0;

    }

    .sv-trust-bridge-player__control {

        width:
            34px;

        height:
            34px;

    }

    .sv-trust-bridge-player__control--prev {

        left:
            -3px;

    }

    .sv-trust-bridge-player__control--next {

        left:
            auto;

        right:
            -3px;

    }

}

@media (max-width: 420px) {

    .sv-trust-bridge-player__controls {

        width:
            88%;

    }

    .sv-trust-bridge-player__control {

        width:
            32px;

        height:
            32px;

    }

}