.pure-button[disabled]{
    border: 1px solid;
}

.btn-success,
.btn-error,
.btn-warning,
.btn-secondary {
    color: white;
    border-radius: 4px;
    border: 1px solid;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.btn-success {
    background: var(--clr-success);
    border-color: var(--clr-success);
    /* this is a green */
}

.btn-error {
    background: var(--clr-error);
    border-color: var(--clr-error);
    /* this is a maroon */
}

.btn-warning {
    background: rgb(223, 117, 20);
    /* this is an orange */
}

.btn-secondary {
    background: var(--clr-secondary);
    border-color: var(--clr-secondary);
    /* this is a light blue */
}

.btn-primary {
    background: var(--clr-primary);
    border-color: var(--clr-primary);
    color:white;
    /* this is a dark */
}

.btn-bordered {
    background-color: transparent;
}