@keyframes button-loading {
    0% {
        background-position: 0px 50%, 12px 50%, 24px 50%;
    }

    20% {
        background-position: 0px 0%, 12px 50%, 24px 50%;
    }

    40% {
        background-position: 0px 0%, 12px 0%, 24px 50%;
    }

    60% {
        background-position: 0px 50%, 12px 0%, 24px 00%;
    }

    80% {
        background-position: 0px 50%, 12px 50%, 24px 0%;
    }

    100% {
        background-position: 0px 50%, 12px 50%, 24px 50%;
    }
}

.button {
    padding: 12px 24px;
    font-size: 17px;
    border-radius: 4px;
    flex-direction: row;
    background-color: var(--color-primary-normal);
    border: 2px solid var(--color-primary-normal);
    color: var(--color-gray-light);
    box-shadow: 0px 2px 4px 0px #0004;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.4px;
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    transition: background-color 0.3s;
    will-change: box-shadow, background-color;

    &:hover {
        background-color: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
        box-shadow: 0px 4px 8px 0px #0004;
    }

    &:disabled {
        background-color: var(--color-gray-thin);
        border-color: var(--color-gray-normal);
        color: var(--color-gray-normal);
        cursor: not-allowed;
    }
}

.button--outline {
    background-color: var(--color-gray-light);
    color: var(--color-primary-normal);

    &:hover {
        background-color: var(--color-gray-light);
        border-color: var(--color-primary-dark);
        color: var(--color-primary-dark);
    }
}

.button--secondary {
    background-color: var(--color-primary-normal);
    color: var(--color-gray-light);
}

.button--loading {
    &:before {
        content: '';
        width: 36px;
        height: 22px;
        background-image:
            radial-gradient(at center, var(--color-gray-light) 4px, transparent 5px),
            radial-gradient(at center, var(--color-gray-light) 4px, transparent 5px),
            radial-gradient(at center, var(--color-gray-light) 4px, transparent 5px);
        background-size: 12px 12px;
        background-position: 0px 50%, 12px 50%, 24px 50%;
        background-repeat: no-repeat;
        animation: button-loading 1s infinite linear;
    }

    &:disabled {
        &:before {
            background-image:
                radial-gradient(at center, var(--color-gray-normal) 4px, transparent 5px),
                radial-gradient(at center, var(--color-gray-normal) 4px, transparent 5px),
                radial-gradient(at center, var(--color-gray-normal) 4px, transparent 5px);
        }
    }

}