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

Space Vanta Theme 1.0

Module:
Cart / Checkout

File:
checkout.css

Responsibility:
Primary checkout action

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


.sv-cart-summary__checkout {
    position: relative;

    appearance: none;

    min-width: 148px;
    min-height: 42px;

    margin: 0;
    padding: 0 22px;

    border: 1px solid rgba(170, 178, 187, 0.52);

    border-radius: 2px;

    outline: 0;

    background:
        rgba(145, 151, 158, 0.08);

    color: var(--sv-color-text-primary);

    font-size: 11px;
    line-height: 1;

    letter-spacing: 0.1em;

    cursor: pointer;

    overflow: hidden;

    transition:
        background var(--sv-transition-fast),
        border-color var(--sv-transition-fast),
        opacity var(--sv-transition-fast),
        transform var(--sv-transition-fast);
}


/*
------------------------------------------------
Subtle Reflective Edge
------------------------------------------------
*/

.sv-cart-summary__checkout::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: -30%;

    width: 22%;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(210, 218, 226, 0.18),
            transparent);

    transform: skewX(-18deg);

    opacity: 0;

    transition:
        opacity var(--sv-transition-fast);
}


.sv-cart-summary__checkout:hover {
    border-color: rgba(180, 188, 198, 0.72);

    background:
        rgba(145, 151, 158, 0.12);
}


.sv-cart-summary__checkout:hover::after {
    opacity: 1;

    animation: sv-cart-checkout-reflection 0.8s ease-out;
}


.sv-cart-summary__checkout:active {
    transform: translateY(1px);
}


.sv-cart-summary__checkout[data-cart-checkout-loading="true"] {
    opacity: 0.5;

    cursor: wait;
}


@keyframes sv-cart-checkout-reflection {

    0% {
        left: -30%;
    }

    100% {
        left: 120%;
    }

}


@media (max-width: 767px) {

    .sv-cart-summary__checkout {
        min-width: 132px;
        min-height: 40px;

        padding: 0 18px;

        font-size: 10px;
    }

}