.btn-default {
    background-color: var(--color-default);
    color: var(--white) !important;
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    text-transform: uppercase;
    cursor: pointer !important;
    width: fit-content;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    transition: all 0.25s;
    text-align: center;
    font-size: 0.7rem;
}

.btn-default * {
    color: var(--white) !important;
}

.btn-default.no-action {
    cursor: default !important;
}

.btn-default.disabled,
.btn-default:disabled {
    background-color: var(--graylight) !important;
    cursor: default !important;
}

.btn-default:not(.no-action):hover {
    background-color: var(--color-default-light);
}

.btn-default:not(.no-action):active {
    background-color: var(--color-default);
}

.btn-default.secundario {
    color: var(--gray);
    background-color: var(--blacklight);
}

.btn-default.secundario * {
    color: var(--gray);
}

.btn-default.secundario:not(.no-action):hover {
    background-color: var(--graydark);
}

.btn-default.secundario:not(.no-action):active {
    background-color: var(--color-default);
}

.btn-default.cinza {
    color: var(--graylight) !important;
    background-color: var(--gray);
}

.btn-default.cinza * {
    color: var(--graylight) !important;
}

.btn-default.cinza:not(.no-action):hover {
    background-color: var(--gray);
}

.btn-default.cinza:not(.no-action):active {
    background-color: var(--graydark);
}

.btn-default.verde {
    color: var(--white) !important;
    background-color: var(--green);
}

.btn-default.verde * {
    color: var(--white) !important;
}

.btn-default.verde:not(.no-action):hover {
    background-color: var(--greenlight);
}

.btn-default.verde:not(.no-action):active {
    background-color: var(--greendark);
}

.btn-default.azul {
    color: var(--white) !important;
    background-color: var(--blue);
}

.btn-default.azul * {
    color: var(--white) !important;
}

.btn-default.azul:not(.no-action):hover {
    background-color: var(--bluelight);
}

.btn-default.azul:not(.no-action):active {
    background-color: var(--bluedark);
}

.btn-default.vermelho {
    color: var(--white) !important;
    background-color: var(--red);
}

.btn-default.vermelho * {
    color: var(--white) !important;
}

.btn-default.vermelho:not(.no-action):hover {
    background-color: var(--redlight);
}

.btn-default.vermelho:not(.no-action):active {
    background-color: var(--reddark);
}

.btn-default.branco {
    color: var(--color-default) !important;
    border: 1px solid var(--graylight);
    background-color: var(--white);
}

.btn-default.branco * {
    color: var(--color-default) !important;
}

.btn-default.branco:not(.no-action):hover {
    background-color: var(--graylight3);
}

.btn-default.branco:not(.no-action):active {
    background-color: var(--graylight);
}

.btn-default.alerta {
    color: var(--white);
    background-color: var(--alert);
}

.btn-default.alerta * {
    color: var(--white);
}

.btn-default.alerta:not(.no-action):hover {
    background-color: var(--alertlight);
}

.btn-default.alerta:not(.no-action):active {
    background-color: var(--alertdark);
}

.submit-loading,
.submit-loading * {
    color: var(--color-default) !important;
}

.btn-default.small {
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 0.6rem;
}

@media only screen and (max-width: 700px) {
    .btn-default {
        font-size: 0.8rem;
        padding: 20px;
    }
    
    .btn-default[type='submit'] {
        width: 100% !important;
    }
}