/*
 * Copyright (c) 2020 por Kaique Garcia <contato@kaiquegarcia.dev>
 */

button[type="submit"], button[type="button"] {
    position: relative;
}

button[type="submit"]::before, button[type="button"]::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    background-image: url("../svg/loading.svg");
    background-repeat: repeat-x;
    background-position-y: center;
    transition: all 400ms;
    animation: loading 4s linear infinite;
}

button[type="submit"].loading::before, button[type="button"].loading::before {
    opacity: .2;
    pointer-events: none;
}

@keyframes loading {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: -200px;
    }
}