/* button colors */
.button.success {
    background-color: var(--success) !important;
    color: white !important;
}

.button.success:focus,
.button.success:hover {
    background-color: color-mix(in srgb, var(--success) 75%, white 25%) !important;
    color: white !important;
}

.button.progress {
    background-color: var(--progress) !important;
    color: white !important;
}

.button.progress:focus,
.button.progress:hover {
    background-color: color-mix(in srgb, var(--progress) 75%, white 25%) !important;
    color: white !important;
}

.button.danger {
    background-color: var(--danger) !important;
    color: white !important;
}

.button.danger:focus,
.button.danger:hover {
    background-color: color-mix(in srgb, var(--danger) 75%, white 25%) !important;
    color: white !important;
}

.button.warning {
    background-color: var(--warning) !important;
    color: white !important;
}

.button.warning:focus,
.button.warning:hover {
    background-color: color-mix(in srgb, var(--warning) 75%, white 25%) !important;
    color: white !important;
}

.button.purple {
    background-color: var(--purple) !important;
    color: white !important;
}

.button.purple:focus,
.button.purple:hover {
    background-color: color-mix(in srgb, var(--purple) 75%, white 25%) !important;
    color: white !important;
}

.button.pink {
    background-color: var(--pink) !important;
    color: white !important;
}

.button.pink:focus,
.button.pink:hover {
    background-color: color-mix(in srgb, var(--pink) 75%, white 25%) !important;
    color: white !important;
}

.button.teal {
    background-color: var(--teal) !important;
    color: white !important;
}

.button.teal:focus,
.button.teal:hover {
    background-color: color-mix(in srgb, var(--teal) 75%, white 25%) !important;
    color: white !important;
}

.button.lime {
    background-color: var(--lime) !important;
    color: white !important;
}

.button.lime:focus,
.button.lime:hover {
    background-color: color-mix(in srgb, var(--lime) 75%, white 25%) !important;
    color: white !important;
}

.button.indigo {
    background-color: var(--indigo) !important;
    color: white !important;
}

.button.indigo:focus,
.button.indigo:hover {
    background-color: color-mix(in srgb, var(--indigo) 75%, white 25%) !important;
    color: white !important;
}

.button.cyan {
    background-color: var(--cyan) !important;
    color: white !important;
}

.button.cyan:focus,
.button.cyan:hover {
    background-color: color-mix(in srgb, var(--cyan) 75%, white 25%) !important;
    color: white !important;
}

.button.gold {
    background-color: var(--gold) !important;
    color: white !important;
}

.button.gold:focus,
.button.gold:hover {
    background-color: color-mix(in srgb, var(--gold) 75%, white 25%) !important;
    color: white !important;
}

.button.silver {
    background-color: var(--silver) !important;
    color: white !important;
}

.button.silver:focus,
.button.silver:hover {
    background-color: color-mix(in srgb, var(--silver) 75%, white 25%) !important;
    color: white !important;
}

.button.bluish {
    background-color: var(--bluish) !important;
    color: white !important;
}

.button.bluish:focus,
.button.bluish:hover {
    background-color: color-mix(in srgb, var(--bluish) 75%, white 25%) !important;
    color: white !important;
}

/* a colors */
a.danger:link,
a.danger:visited {
    color: color-mix(in srgb, var(--danger) 75%, var(--rootColor) 25%);
}

a.danger:link:hover,
a.danger:visited:hover,
a.danger:link:active,
a.danger:visited:active {
    color: color-mix(in srgb, var(--danger) 50%, var(--rootColor) 50%);
}

a.warning:link,
a.warning:visited {
    color: color-mix(in srgb, var(--warning) 75%, var(--rootColor) 25%);
}

a.warning:link:hover,
a.warning:visited:hover,
a.warning:link:active,
a.warning:visited:active {
    color: color-mix(in srgb, var(--warning) 50%, var(--rootColor) 50%);
}

a.progress:link,
a.progress:visited {
    color: color-mix(in srgb, var(--progress) 75%, var(--rootColor) 25%);
}

a.progress:link:hover,
a.progress:visited:hover,
a.progress:link:active,
a.progress:visited:active {
    color: color-mix(in srgb, var(--progress) 50%, var(--rootColor) 50%);
}

a.purple:link,
a.purple:visited {
    color: color-mix(in srgb, var(--purple) 75%, var(--rootColor) 25%);
}

a.purple:link:hover,
a.purple:visited:hover,
a.purple:link:active,
a.purple:visited:active {
    color: color-mix(in srgb, var(--purple) 50%, var(--rootColor) 50%);
}

a.pink:link,
a.pink:visited {
    color: color-mix(in srgb, var(--pink) 75%, var(--rootColor) 25%);
}

a.pink:link:hover,
a.pink:visited:hover,
a.pink:link:active,
a.pink:visited:active {
    color: color-mix(in srgb, var(--pink) 50%, var(--rootColor) 50%);
}

a.teal:link,
a.teal:visited {
    color: color-mix(in srgb, var(--teal) 75%, var(--rootColor) 25%);
}

a.teal:link:hover,
a.teal:visited:hover,
a.teal:link:active,
a.teal:visited:active {
    color: color-mix(in srgb, var(--teal) 50%, var(--rootColor) 50%);
}

a.lime:link,
a.lime:visited {
    color: color-mix(in srgb, var(--lime) 75%, var(--rootColor) 25%);
}

a.lime:link:hover,
a.lime:visited:hover,
a.lime:link:active,
a.lime:visited:active {
    color: color-mix(in srgb, var(--lime) 50%, var(--rootColor) 50%);
}

a.indigo:link,
a.indigo:visited {
    color: color-mix(in srgb, var(--indigo) 75%, var(--rootColor) 25%);
}

a.indigo:link:hover,
a.indigo:visited:hover,
a.indigo:link:active,
a.indigo:visited:active {
    color: color-mix(in srgb, var(--indigo) 50%, var(--rootColor) 50%);
}

a.cyan:link,
a.cyan:visited {
    color: color-mix(in srgb, var(--cyan) 75%, var(--rootColor) 25%);
}

a.cyan:link:hover,
a.cyan:visited:hover,
a.cyan:link:active,
a.cyan:visited:active {
    color: color-mix(in srgb, var(--cyan) 50%, var(--rootColor) 50%);
}

a.gold:link,
a.gold:visited {
    color: color-mix(in srgb, var(--gold) 75%, var(--rootColor) 25%);
}

a.gold:link:hover,
a.gold:visited:hover,
a.gold:link:active,
a.gold:visited:active {
    color: color-mix(in srgb, var(--gold) 50%, var(--rootColor) 50%);
}

a.silver:link,
a.silver:visited {
    color: color-mix(in srgb, var(--silver) 75%, var(--rootColor) 25%);
}

a.silver:link:hover,
a.silver:visited:hover,
a.silver:link:active,
a.silver:visited:active {
    color: color-mix(in srgb, var(--silver) 50%, var(--rootColor) 50%);
}

a.bluish:link,
a.bluish:visited {
    color: color-mix(in srgb, var(--bluish) 75%, var(--rootColor) 25%);
}

a.bluish:link:hover,
a.bluish:visited:hover,
a.bluish:link:active,
a.bluish:visited:active {
    color: color-mix(in srgb, var(--bluish) 50%, var(--rootColor) 50%);
}