/* Color classes */
.is-primary {
    background-color: var(--primary);
    color: var(--contrast);
}

.is-primary:hover {
    background-color: var(--hover-primary);
    color: var(--contrast);
}

.is-secondary {
    background-color: var(--secondary);
    color: var(--contrast);
}

.is-secondary:hover {
    background-color: var(--hover-secondary);
    color: var(--contrast);
}

.is-accent {
    background-color: var(--accent);
    color: var(--contrast);
}

.is-accent:hover {
    background-color: var(--hover-accent);
    color: var(--contrast);
}

.is-active {
    background-color: var(--active);
    color: var(--contrast);
}

.is-active:hover {
    background-color: var(--hover-active);
    color: var(--contrast);
}

.is-default {
    background-color: var(--default);
    color: var(--contrast);
}

.is-default:hover {
    background-color: var(--hover-default);
    color: var(--contrast);
}

.is-contrast {
    background-color: var(--contrast);
    color: var(--default);
}

.is-contrast:hover {
    background-color: var(--hover-contrast);
    color: var(--default);
}

.is-danger {
    background-color: var(--danger);
    color: var(--contrast);
}

.is-danger:hover {
    background-color: var(--hover-danger);
    color: var(--contrast);
}

/* text-only */
.text-primary {
    color: var(--contrast);
}

.text-secondary {
    color: var(--contrast);
}

.text-accent {
    color: var(--contrast);
}

.text-active {
    color: var(--contrast);
}

.text-default {
    color: var(--contrast);
}

.text-contrast {
    color: var(--default);
}

.text-danger {
    color: var(--contrast);
}

/* bg-only */
.bg-primary {
    background-color: var(--primary);
}

.bg-primary:hover {
    background-color: var(--hover-primary);
}

.bg-secondary {
    background-color: var(--secondary);
}

.bg-secondary:hover {
    background-color: var(--hover-secondary);
}

.bg-accent {
    background-color: var(--accent);
}

.bg-accent:hover {
    background-color: var(--hover-accent);
}

.bg-active {
    background-color: var(--active);
}

.bg-active:hover {
    background-color: var(--hover-active);
}

.bg-default {
    background-color: var(--default);
}

.bg-default:hover {
    background-color: var(--hover-default);
}

.bg-contrast {
    background-color: var(--contrast);
}

.bg-contrast:hover {
    background-color: var(--hover-contrast);
}

.bg-danger {
    background-color: var(--danger);
}

.bg-danger:hover {
    background-color: var(--hover-danger);
}

/* Unset */
.bg-unset {
    background-color: unset;
}

.bg-unset:hover {
    background-color: unset;
}

.no-border {
    border: none;
}

.no-border:hover {
    border: none;
}

.color-unset {
    color: unset;
}

.color-unset:hover {
    color: unset;
}

/* Button */
.btn.btn-primary {
    background-color: var(--primary);
    color: var(--contrast);
}

.btn.btn-primary:hover {
    background-color: var(--hover-primary);
    color: var(--default);
}

.btn.btn-secondary {
    background-color: var(--secondary);
    color: var(--contrast);
}

.btn.btn-secondary:hover {
    background-color: var(--hover-secondary);
    color: var(--default);
}

.btn.btn-warning {
    background-color: var(--attention);
    color: var(--contrast);
}

.btn.btn-warning:hover {
    background-color: var(--hover-attention);
    color: var(--default);
}

.btn.btn-info {
    background-color: var(--active);
    color: var(--contrast);
}

.btn.btn-info:hover {
    background-color: var(--hover-active);
    color: var(--default);
}

.btn.btn-muted {
    background-color: var(--muted);
    color: var(--contrast);
}

.btn.btn-muted:hover {
    background-color: var(--hover-muted);
    color: var(--default);
}

.btn.btn-danger {
    background-color: var(--danger);
    color: var(--contrast);
}

.btn.btn-danger:hover {
    background-color: var(--hover-danger);
    color: var(--default);
}

.btn.btn-success {
    background-color: var(--success);
    color: var(--contrast);
}

.btn.btn-success:hover {
    background-color: var(--hover-success);
    color: var(--default);
}