/*
 * Efekt se použije výhradně na prvky,
 * kterým JavaScript přidá třídu .order-button-shine.
 */

a.order-button-shine,
button.order-button-shine {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Odlesk */
a.order-button-shine::after,
button.order-button-shine::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -45%;
    width: 22%;
    height: 300%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.06),
        rgba(255, 255, 255, 0.38),
        rgba(255, 255, 255, 0.06),
        transparent
    );

    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 1;

    animation: order-button-shine-animation 5.5s linear infinite;
}

/*
 * Text většinou zůstane čitelný i bez této části.
 * Pravidlo pomáhá u tlačítek, která mají text v elementu span.
 */
a.order-button-shine > *,
button.order-button-shine > * {
    position: relative;
    z-index: 2;
}

@keyframes order-button-shine-animation {
    0%,
    72% {
        left: -45%;
        opacity: 0;
    }

    76% {
        opacity: 1;
    }

    94% {
        left: 125%;
        opacity: 1;
    }

    100% {
        left: 125%;
        opacity: 0;
    }
}

/* Neaktivní tlačítka bez animace */
button.order-button-shine:disabled::after,
button.order-button-shine[disabled]::after,
a.order-button-shine.disabled::after,
a.order-button-shine[aria-disabled="true"]::after {
    display: none;
}

/*
 * Záložní varianta pro input.
 * Input nepodporuje ::before a ::after stejně spolehlivě jako button.
 */
input.order-button-shine {
    background-image: linear-gradient(
        110deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.38) 50%,
        transparent 60%,
        transparent 100%
    );

    background-size: 35% 100%;
    background-position: -100% 0;
    background-repeat: no-repeat;

    animation: order-input-shine-animation 5.5s linear infinite;
}

@keyframes order-input-shine-animation {
    0%,
    72% {
        background-position: -100% 0;
    }

    94%,
    100% {
        background-position: 200% 0;
    }
}

input.order-button-shine:disabled {
    animation: none;
    background-image: none;
}

@media (prefers-reduced-motion: reduce) {
    a.order-button-shine::after,
    button.order-button-shine::after {
        display: none;
    }

    input.order-button-shine {
        animation: none;
        background-image: none;
    }
}