/* #### BUTTONS #### */

/* Existing buttons style */
.button {
    font-size: 1rem;
    font-weight: 500;
    padding: 6px 8px;
    margin-bottom: 1rem;
    color: #ffffff;
    text-decoration: none;
    line-height: 30px;
    border: none;
    text-align: center;
    width: 100%;
    border-radius: 0.25rem;
    transition: all 200ms ease-out;
    cursor: pointer;
    box-shadow: 0 2px 4px #00000000;
}

.button:hover,
.button:focus {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px #00000033;
}

.button:active {
    filter: brightness(0.95);
    transform: translateY(0px);
}

/* Variations */
.button.button-success {
    background: var(--success);
}

.button.button-danger {
    background: var(--danger);
}