.button {
    background: none;
    border: none;
    color: var(--secoundary);
    border-radius: 5px;
    padding: 7px 14px;
    cursor: pointer;
    transition: .3s;
    font-size: 0.875rem;
}
.button:hover {
    filter: opacity(.80);
}

.button.button-primary {
    background-color: var(--primary);
    color: var(--white);
}
.button.button-success {
    background-color: var(--success);
    color: var(--white);
}
.button.button-warning {
    background-color: var(--warning);
    color: var(--white);
}
.button.button-danger {
    background-color: var(--red);
    color: var(--white);
}
.button.button-secondary {
    background-color: var(--secondary);
    color: var(--white);
}

.button.button-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.button.button-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 7px 14px;
}
.button.button-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.button.button-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}