button, input[type="button"] {
    font-family: var(--font-family), serif;
    font-size: var(--font-size-label);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: white;
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--border-radius-input);
    outline: none;
    padding: 14px 14px 12px 14px;
    cursor: pointer;
    transition: .2s;
}

button:disabled {
    cursor: not-allowed;
}

button:not(:disabled):hover, input[type="button"]:not(:disabled):hover {
    background-color: color-mix(in srgb, var(--color-primary), #000000 15%);
}

button.green, input[type="button"].green {
    background-color: var(--color-green);
}

button.green:not(:disabled):hover, input[type="button"].green:not(:disabled):hover {
    background-color: color-mix(in srgb, var(--color-green), #000000 15%);
}

button.red, input[type="button"].red {
    background-color: var(--color-red);
}

button.red:not(:disabled):hover, input[type="button"].red:not(:disabled):hover {
    background-color: color-mix(in srgb, var(--color-red), #000000 15%);
}

button.yellow, input[type="button"].yellow {
    background-color: var(--color-yellow);
}

button.yellow:not(:disabled):hover, input[type="button"].yellow:not(:disabled):hover {
    background-color: color-mix(in srgb, var(--color-yellow), #000000 15%);
}

button.grey, input[type="button"].grey {
    background-color: var(--color-darkgrey);
}

button.grey:not(:disabled):hover, input[type="button"].grey:not(:disabled):hover {
    background-color: color-mix(in srgb, var(--color-darkgrey), #000000 15%);
}