/* DO NOT MODIFY THIS FILE DIRECTLY!
It is generated by scripts/build-color-variants.js, so any direct
changes will be overridden on the next build. Instead, modify
scripts/build-color-variants.js to produce the output you want */

/* Color variants */

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

.btn--gray:hover,
.btn--gray.is-active {
  background-color: var(--gray-deep);
}

.btn--gray-light {
  background-color: var(--gray-light);
}

.btn--gray-light:hover,
.btn--gray-light.is-active {
  background-color: var(--gray);
}

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

.btn--pink:hover,
.btn--pink.is-active {
  background-color: var(--pink-deep);
}

.btn--pink-light {
  background-color: var(--pink-light);
}

.btn--pink-light:hover,
.btn--pink-light.is-active {
  background-color: var(--pink);
}

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

.btn--red:hover,
.btn--red.is-active {
  background-color: var(--red-deep);
}

.btn--red-light {
  background-color: var(--red-light);
}

.btn--red-light:hover,
.btn--red-light.is-active {
  background-color: var(--red);
}

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

.btn--orange:hover,
.btn--orange.is-active {
  background-color: var(--orange-deep);
}

.btn--orange-light {
  background-color: var(--orange-light);
}

.btn--orange-light:hover,
.btn--orange-light.is-active {
  background-color: var(--orange);
}

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

.btn--yellow:hover,
.btn--yellow.is-active {
  background-color: var(--yellow-deep);
}

.btn--yellow-light {
  background-color: var(--yellow-light);
}

.btn--yellow-light:hover,
.btn--yellow-light.is-active {
  background-color: var(--yellow);
}

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

.btn--green:hover,
.btn--green.is-active {
  background-color: var(--green-deep);
}

.btn--green-light {
  background-color: var(--green-light);
}

.btn--green-light:hover,
.btn--green-light.is-active {
  background-color: var(--green);
}

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

.btn--blue:hover,
.btn--blue.is-active {
  background-color: var(--blue-deep);
}

.btn--blue-light {
  background-color: var(--blue-light);
}

.btn--blue-light:hover,
.btn--blue-light.is-active {
  background-color: var(--blue);
}

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

.btn--purple:hover,
.btn--purple.is-active {
  background-color: var(--purple-deep);
}

.btn--purple-light {
  background-color: var(--purple-light);
}

.btn--purple-light:hover,
.btn--purple-light.is-active {
  background-color: var(--purple);
}

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

.btn--darken10:hover,
.btn--darken10.is-active {
  background-color: var(--darken25);
}

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

.btn--darken25:hover,
.btn--darken25.is-active {
  background-color: var(--darken50);
}

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

.btn--darken50:hover,
.btn--darken50.is-active {
  background-color: var(--darken75);
}

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

.btn--darken75:hover,
.btn--darken75.is-active {
  background-color: var(--black);
}

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

.btn--lighten10:hover,
.btn--lighten10.is-active {
  background-color: var(--lighten25);
}

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

.btn--lighten25:hover,
.btn--lighten25.is-active {
  background-color: var(--lighten50);
}

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

.btn--lighten50:hover,
.btn--lighten50.is-active {
  background-color: var(--lighten75);
}

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

.btn--lighten75:hover,
.btn--lighten75.is-active {
  background-color: var(--white);
}

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

.btn--white:hover,
.btn--white.is-active {
  background-color: var(--lighten75);
}

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

.btn--transparent:hover,
.btn--transparent.is-active {
  background-color: var(--darken10);
}

.btn--stroke.btn--gray {
  color: var(--gray);
}

.btn--stroke.btn--gray:hover,
.btn--stroke.btn--gray.is-active {
  color: var(--gray-deep);
}

.btn--stroke.btn--pink {
  color: var(--pink);
}

.btn--stroke.btn--pink:hover,
.btn--stroke.btn--pink.is-active {
  color: var(--pink-deep);
}

.btn--stroke.btn--red {
  color: var(--red);
}

.btn--stroke.btn--red:hover,
.btn--stroke.btn--red.is-active {
  color: var(--red-deep);
}

.btn--stroke.btn--orange {
  color: var(--orange);
}

.btn--stroke.btn--orange:hover,
.btn--stroke.btn--orange.is-active {
  color: var(--orange-deep);
}

.btn--stroke.btn--yellow {
  color: var(--yellow);
}

.btn--stroke.btn--yellow:hover,
.btn--stroke.btn--yellow.is-active {
  color: var(--yellow-deep);
}

.btn--stroke.btn--green {
  color: var(--green);
}

.btn--stroke.btn--green:hover,
.btn--stroke.btn--green.is-active {
  color: var(--green-deep);
}

.btn--stroke.btn--blue {
  color: var(--blue);
}

.btn--stroke.btn--blue:hover,
.btn--stroke.btn--blue.is-active {
  color: var(--blue-deep);
}

.btn--stroke.btn--purple {
  color: var(--purple);
}

.btn--stroke.btn--purple:hover,
.btn--stroke.btn--purple.is-active {
  color: var(--purple-deep);
}

.btn--stroke.btn--darken25 {
  color: var(--darken25);
}

.btn--stroke.btn--darken25:hover,
.btn--stroke.btn--darken25.is-active {
  color: var(--darken50);
}

.btn--stroke.btn--darken50 {
  color: var(--darken50);
}

.btn--stroke.btn--darken50:hover,
.btn--stroke.btn--darken50.is-active {
  color: var(--darken75);
}

.btn--stroke.btn--darken75 {
  color: var(--darken75);
}

.btn--stroke.btn--darken75:hover,
.btn--stroke.btn--darken75.is-active {
  color: var(--black);
}

.btn--stroke.btn--lighten25 {
  color: var(--lighten25);
}

.btn--stroke.btn--lighten25:hover,
.btn--stroke.btn--lighten25.is-active {
  color: var(--lighten50);
}

.btn--stroke.btn--lighten50 {
  color: var(--lighten50);
}

.btn--stroke.btn--lighten50:hover,
.btn--stroke.btn--lighten50.is-active {
  color: var(--lighten75);
}

.btn--stroke.btn--lighten75 {
  color: var(--lighten75);
}

.btn--stroke.btn--lighten75:hover,
.btn--stroke.btn--lighten75.is-active {
  color: var(--white);
}

.btn--stroke.btn--white {
  color: var(--white);
}

.btn--stroke.btn--white:hover,
.btn--stroke.btn--white.is-active {
  color: var(--lighten75);
}

.btn--stroke.btn--transparent {
  color: var(--transparent);
}

.btn--stroke.btn--transparent:hover,
.btn--stroke.btn--transparent.is-active {
  color: var(--darken10);
}

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

.select--gray {
  color: var(--gray);
}

.select--gray:focus {
  color: var(--gray-deep);
}

.select--gray:hover {
  color: var(--gray-deep);
}

.select--gray + .select-arrow {
  border-top-color: var(--gray);
}

.select--gray:focus + .select-arrow {
  border-top-color: var(--gray-deep);
}

.select--pink {
  color: var(--pink);
}

.select--pink:focus {
  color: var(--pink-deep);
}

.select--pink:hover {
  color: var(--pink-deep);
}

.select--pink + .select-arrow {
  border-top-color: var(--pink);
}

.select--pink:focus + .select-arrow {
  border-top-color: var(--pink-deep);
}

.select--red {
  color: var(--red);
}

.select--red:focus {
  color: var(--red-deep);
}

.select--red:hover {
  color: var(--red-deep);
}

.select--red + .select-arrow {
  border-top-color: var(--red);
}

.select--red:focus + .select-arrow {
  border-top-color: var(--red-deep);
}

.select--orange {
  color: var(--orange);
}

.select--orange:focus {
  color: var(--orange-deep);
}

.select--orange:hover {
  color: var(--orange-deep);
}

.select--orange + .select-arrow {
  border-top-color: var(--orange);
}

.select--orange:focus + .select-arrow {
  border-top-color: var(--orange-deep);
}

.select--yellow {
  color: var(--yellow);
}

.select--yellow:focus {
  color: var(--yellow-deep);
}

.select--yellow:hover {
  color: var(--yellow-deep);
}

.select--yellow + .select-arrow {
  border-top-color: var(--yellow);
}

.select--yellow:focus + .select-arrow {
  border-top-color: var(--yellow-deep);
}

.select--green {
  color: var(--green);
}

.select--green:focus {
  color: var(--green-deep);
}

.select--green:hover {
  color: var(--green-deep);
}

.select--green + .select-arrow {
  border-top-color: var(--green);
}

.select--green:focus + .select-arrow {
  border-top-color: var(--green-deep);
}

.select--blue {
  color: var(--blue);
}

.select--blue:focus {
  color: var(--blue-deep);
}

.select--blue:hover {
  color: var(--blue-deep);
}

.select--blue + .select-arrow {
  border-top-color: var(--blue);
}

.select--blue:focus + .select-arrow {
  border-top-color: var(--blue-deep);
}

.select--purple {
  color: var(--purple);
}

.select--purple:focus {
  color: var(--purple-deep);
}

.select--purple:hover {
  color: var(--purple-deep);
}

.select--purple + .select-arrow {
  border-top-color: var(--purple);
}

.select--purple:focus + .select-arrow {
  border-top-color: var(--purple-deep);
}

.select--darken25 {
  color: var(--darken25);
}

.select--darken25:focus {
  color: var(--darken50);
}

.select--darken25:hover {
  color: var(--darken50);
}

.select--darken25 + .select-arrow {
  border-top-color: var(--darken25);
}

.select--darken25:focus + .select-arrow {
  border-top-color: var(--darken50);
}

.select--darken50 {
  color: var(--darken50);
}

.select--darken50:focus {
  color: var(--darken75);
}

.select--darken50:hover {
  color: var(--darken75);
}

.select--darken50 + .select-arrow {
  border-top-color: var(--darken50);
}

.select--darken50:focus + .select-arrow {
  border-top-color: var(--darken75);
}

.select--darken75 {
  color: var(--darken75);
}

.select--darken75:focus {
  color: var(--black);
}

.select--darken75:hover {
  color: var(--black);
}

.select--darken75 + .select-arrow {
  border-top-color: var(--darken75);
}

.select--darken75:focus + .select-arrow {
  border-top-color: var(--black);
}

.select--lighten25 {
  color: var(--lighten25);
}

.select--lighten25:focus {
  color: var(--lighten50);
}

.select--lighten25:hover {
  color: var(--lighten50);
}

.select--lighten25 + .select-arrow {
  border-top-color: var(--lighten25);
}

.select--lighten25:focus + .select-arrow {
  border-top-color: var(--lighten50);
}

.select--lighten50 {
  color: var(--lighten50);
}

.select--lighten50:focus {
  color: var(--lighten75);
}

.select--lighten50:hover {
  color: var(--lighten75);
}

.select--lighten50 + .select-arrow {
  border-top-color: var(--lighten50);
}

.select--lighten50:focus + .select-arrow {
  border-top-color: var(--lighten75);
}

.select--lighten75 {
  color: var(--lighten75);
}

.select--lighten75:focus {
  color: var(--white);
}

.select--lighten75:hover {
  color: var(--white);
}

.select--lighten75 + .select-arrow {
  border-top-color: var(--lighten75);
}

.select--lighten75:focus + .select-arrow {
  border-top-color: var(--white);
}

.select--white {
  color: var(--white);
}

.select--white:focus {
  color: var(--lighten75);
}

.select--white:hover {
  color: var(--lighten75);
}

.select--white + .select-arrow {
  border-top-color: var(--white);
}

.select--white:focus + .select-arrow {
  border-top-color: var(--lighten75);
}

.select--transparent {
  color: var(--transparent);
}

.select--transparent:focus {
  color: var(--darken10);
}

.select--transparent:hover {
  color: var(--darken10);
}

.select--transparent + .select-arrow {
  border-top-color: var(--transparent);
}

.select--transparent:focus + .select-arrow {
  border-top-color: var(--darken10);
}

.textarea--border-gray,
.input--border-gray,
.select--stroke.select--gray {
  box-shadow: inset 0 0 0 1px var(--gray);
}

.textarea--border-gray:focus,
.input--border-gray:focus {
  box-shadow: inset 0 0 0 1px var(--gray-deep);
}

[data-assembly-focus-control='visible'] .select--stroke.select--gray:focus {
  box-shadow: inset 0 0 0 1px var(--gray-deep), var(--focus-shadow);
}

.textarea--border-pink,
.input--border-pink,
.select--stroke.select--pink {
  box-shadow: inset 0 0 0 1px var(--pink);
}

.textarea--border-pink:focus,
.input--border-pink:focus {
  box-shadow: inset 0 0 0 1px var(--pink-deep);
}

[data-assembly-focus-control='visible'] .select--stroke.select--pink:focus {
  box-shadow: inset 0 0 0 1px var(--pink-deep), var(--focus-shadow);
}

.textarea--border-red,
.input--border-red,
.select--stroke.select--red {
  box-shadow: inset 0 0 0 1px var(--red);
}

.textarea--border-red:focus,
.input--border-red:focus {
  box-shadow: inset 0 0 0 1px var(--red-deep);
}

[data-assembly-focus-control='visible'] .select--stroke.select--red:focus {
  box-shadow: inset 0 0 0 1px var(--red-deep), var(--focus-shadow);
}

.textarea--border-orange,
.input--border-orange,
.select--stroke.select--orange {
  box-shadow: inset 0 0 0 1px var(--orange);
}

.textarea--border-orange:focus,
.input--border-orange:focus {
  box-shadow: inset 0 0 0 1px var(--orange-deep);
}

[data-assembly-focus-control='visible'] .select--stroke.select--orange:focus {
  box-shadow: inset 0 0 0 1px var(--orange-deep), var(--focus-shadow);
}

.textarea--border-yellow,
.input--border-yellow,
.select--stroke.select--yellow {
  box-shadow: inset 0 0 0 1px var(--yellow);
}

.textarea--border-yellow:focus,
.input--border-yellow:focus {
  box-shadow: inset 0 0 0 1px var(--yellow-deep);
}

[data-assembly-focus-control='visible'] .select--stroke.select--yellow:focus {
  box-shadow: inset 0 0 0 1px var(--yellow-deep), var(--focus-shadow);
}

.textarea--border-green,
.input--border-green,
.select--stroke.select--green {
  box-shadow: inset 0 0 0 1px var(--green);
}

.textarea--border-green:focus,
.input--border-green:focus {
  box-shadow: inset 0 0 0 1px var(--green-deep);
}

[data-assembly-focus-control='visible'] .select--stroke.select--green:focus {
  box-shadow: inset 0 0 0 1px var(--green-deep), var(--focus-shadow);
}

.textarea--border-blue,
.input--border-blue,
.select--stroke.select--blue {
  box-shadow: inset 0 0 0 1px var(--blue);
}

.textarea--border-blue:focus,
.input--border-blue:focus {
  box-shadow: inset 0 0 0 1px var(--blue-deep);
}

[data-assembly-focus-control='visible'] .select--stroke.select--blue:focus {
  box-shadow: inset 0 0 0 1px var(--blue-deep), var(--focus-shadow);
}

.textarea--border-purple,
.input--border-purple,
.select--stroke.select--purple {
  box-shadow: inset 0 0 0 1px var(--purple);
}

.textarea--border-purple:focus,
.input--border-purple:focus {
  box-shadow: inset 0 0 0 1px var(--purple-deep);
}

[data-assembly-focus-control='visible'] .select--stroke.select--purple:focus {
  box-shadow: inset 0 0 0 1px var(--purple-deep), var(--focus-shadow);
}

.textarea--border-darken25,
.input--border-darken25,
.select--stroke.select--darken25 {
  box-shadow: inset 0 0 0 1px var(--darken25);
}

.textarea--border-darken25:focus,
.input--border-darken25:focus {
  box-shadow: inset 0 0 0 1px var(--darken50);
}

[data-assembly-focus-control='visible'] .select--stroke.select--darken25:focus {
  box-shadow: inset 0 0 0 1px var(--darken50), var(--focus-shadow);
}

.textarea--border-darken50,
.input--border-darken50,
.select--stroke.select--darken50 {
  box-shadow: inset 0 0 0 1px var(--darken50);
}

.textarea--border-darken50:focus,
.input--border-darken50:focus {
  box-shadow: inset 0 0 0 1px var(--darken75);
}

[data-assembly-focus-control='visible'] .select--stroke.select--darken50:focus {
  box-shadow: inset 0 0 0 1px var(--darken75), var(--focus-shadow);
}

.textarea--border-darken75,
.input--border-darken75,
.select--stroke.select--darken75 {
  box-shadow: inset 0 0 0 1px var(--darken75);
}

.textarea--border-darken75:focus,
.input--border-darken75:focus {
  box-shadow: inset 0 0 0 1px var(--black);
}

[data-assembly-focus-control='visible'] .select--stroke.select--darken75:focus {
  box-shadow: inset 0 0 0 1px var(--black), var(--focus-shadow);
}

.textarea--border-lighten25,
.input--border-lighten25,
.select--stroke.select--lighten25 {
  box-shadow: inset 0 0 0 1px var(--lighten25);
}

.textarea--border-lighten25:focus,
.input--border-lighten25:focus {
  box-shadow: inset 0 0 0 1px var(--lighten50);
}

[data-assembly-focus-control='visible'] .select--stroke.select--lighten25:focus {
  box-shadow: inset 0 0 0 1px var(--lighten50), var(--focus-shadow);
}

.textarea--border-lighten50,
.input--border-lighten50,
.select--stroke.select--lighten50 {
  box-shadow: inset 0 0 0 1px var(--lighten50);
}

.textarea--border-lighten50:focus,
.input--border-lighten50:focus {
  box-shadow: inset 0 0 0 1px var(--lighten75);
}

[data-assembly-focus-control='visible'] .select--stroke.select--lighten50:focus {
  box-shadow: inset 0 0 0 1px var(--lighten75), var(--focus-shadow);
}

.textarea--border-lighten75,
.input--border-lighten75,
.select--stroke.select--lighten75 {
  box-shadow: inset 0 0 0 1px var(--lighten75);
}

.textarea--border-lighten75:focus,
.input--border-lighten75:focus {
  box-shadow: inset 0 0 0 1px var(--white);
}

[data-assembly-focus-control='visible'] .select--stroke.select--lighten75:focus {
  box-shadow: inset 0 0 0 1px var(--white), var(--focus-shadow);
}

.textarea--border-white,
.input--border-white,
.select--stroke.select--white {
  box-shadow: inset 0 0 0 1px var(--white);
}

.textarea--border-white:focus,
.input--border-white:focus {
  box-shadow: inset 0 0 0 1px var(--lighten75);
}

[data-assembly-focus-control='visible'] .select--stroke.select--white:focus {
  box-shadow: inset 0 0 0 1px var(--lighten75), var(--focus-shadow);
}

.textarea--border-transparent,
.input--border-transparent,
.select--stroke.select--transparent {
  box-shadow: inset 0 0 0 1px var(--transparent);
}

.textarea--border-transparent:focus,
.input--border-transparent:focus {
  box-shadow: inset 0 0 0 1px var(--darken10);
}

[data-assembly-focus-control='visible'] .select--stroke.select--transparent:focus {
  box-shadow: inset 0 0 0 1px var(--darken10), var(--focus-shadow);
}

.checkbox--gray {
  border-color: var(--gray);
}

input:checked + .checkbox--gray {
  background-color: var(--gray);
}

.checkbox--pink {
  border-color: var(--pink);
}

input:checked + .checkbox--pink {
  background-color: var(--pink);
}

.checkbox--red {
  border-color: var(--red);
}

input:checked + .checkbox--red {
  background-color: var(--red);
}

.checkbox--orange {
  border-color: var(--orange);
}

input:checked + .checkbox--orange {
  background-color: var(--orange);
}

.checkbox--yellow {
  border-color: var(--yellow);
}

input:checked + .checkbox--yellow {
  background-color: var(--yellow);
}

.checkbox--green {
  border-color: var(--green);
}

input:checked + .checkbox--green {
  background-color: var(--green);
}

.checkbox--blue {
  border-color: var(--blue);
}

input:checked + .checkbox--blue {
  background-color: var(--blue);
}

.checkbox--purple {
  border-color: var(--purple);
}

input:checked + .checkbox--purple {
  background-color: var(--purple);
}

.checkbox--darken25 {
  border-color: var(--darken25);
}

input:checked + .checkbox--darken25 {
  background-color: var(--darken25);
}

.checkbox--darken50 {
  border-color: var(--darken50);
}

input:checked + .checkbox--darken50 {
  background-color: var(--darken50);
}

.checkbox--darken75 {
  border-color: var(--darken75);
}

input:checked + .checkbox--darken75 {
  background-color: var(--darken75);
}

.checkbox--lighten25 {
  border-color: var(--lighten25);
}

input:checked + .checkbox--lighten25 {
  background-color: var(--lighten25);
}

.checkbox--lighten50 {
  border-color: var(--lighten50);
}

input:checked + .checkbox--lighten50 {
  background-color: var(--lighten50);
}

.checkbox--lighten75 {
  border-color: var(--lighten75);
}

input:checked + .checkbox--lighten75 {
  background-color: var(--lighten75);
}

.checkbox--white {
  border-color: var(--white);
}

input:checked + .checkbox--white {
  background-color: var(--white);
}

.checkbox--transparent {
  border-color: var(--transparent);
}

input:checked + .checkbox--transparent {
  background-color: var(--transparent);
}

.radio--gray,
input:checked + .radio--gray {
  color: var(--gray);
}

.radio--pink,
input:checked + .radio--pink {
  color: var(--pink);
}

.radio--red,
input:checked + .radio--red {
  color: var(--red);
}

.radio--orange,
input:checked + .radio--orange {
  color: var(--orange);
}

.radio--yellow,
input:checked + .radio--yellow {
  color: var(--yellow);
}

.radio--green,
input:checked + .radio--green {
  color: var(--green);
}

.radio--blue,
input:checked + .radio--blue {
  color: var(--blue);
}

.radio--purple,
input:checked + .radio--purple {
  color: var(--purple);
}

.radio--darken25,
input:checked + .radio--darken25 {
  color: var(--darken25);
}

.radio--darken50,
input:checked + .radio--darken50 {
  color: var(--darken50);
}

.radio--darken75,
input:checked + .radio--darken75 {
  color: var(--darken75);
}

.radio--lighten25,
input:checked + .radio--lighten25 {
  color: var(--lighten25);
}

.radio--lighten50,
input:checked + .radio--lighten50 {
  color: var(--lighten50);
}

.radio--lighten75,
input:checked + .radio--lighten75 {
  color: var(--lighten75);
}

.radio--white,
input:checked + .radio--white {
  color: var(--white);
}

.radio--transparent,
input:checked + .radio--transparent {
  color: var(--transparent);
}

.toggle--gray {
  color: var(--gray);
}

input:checked + .toggle--gray {
  background: var(--gray);
}

.toggle--pink {
  color: var(--pink);
}

input:checked + .toggle--pink {
  background: var(--pink);
}

.toggle--red {
  color: var(--red);
}

input:checked + .toggle--red {
  background: var(--red);
}

.toggle--orange {
  color: var(--orange);
}

input:checked + .toggle--orange {
  background: var(--orange);
}

.toggle--yellow {
  color: var(--yellow);
}

input:checked + .toggle--yellow {
  background: var(--yellow);
}

.toggle--green {
  color: var(--green);
}

input:checked + .toggle--green {
  background: var(--green);
}

.toggle--blue {
  color: var(--blue);
}

input:checked + .toggle--blue {
  background: var(--blue);
}

.toggle--purple {
  color: var(--purple);
}

input:checked + .toggle--purple {
  background: var(--purple);
}

.toggle--darken25 {
  color: var(--darken25);
}

input:checked + .toggle--darken25 {
  background: var(--darken25);
}

.toggle--darken50 {
  color: var(--darken50);
}

input:checked + .toggle--darken50 {
  background: var(--darken50);
}

.toggle--darken75 {
  color: var(--darken75);
}

input:checked + .toggle--darken75 {
  background: var(--darken75);
}

.toggle--lighten25 {
  color: var(--lighten25);
}

input:checked + .toggle--lighten25 {
  background: var(--lighten25);
}

.toggle--lighten50 {
  color: var(--lighten50);
}

input:checked + .toggle--lighten50 {
  background: var(--lighten50);
}

.toggle--lighten75 {
  color: var(--lighten75);
}

input:checked + .toggle--lighten75 {
  background: var(--lighten75);
}

.toggle--white {
  color: var(--white);
}

input:checked + .toggle--white {
  background: var(--white);
}

.toggle--transparent {
  color: var(--transparent);
}

input:checked + .toggle--transparent {
  background: var(--transparent);
}

input:checked + .toggle--active-gray {
  color: var(--gray);
}

input:checked + .toggle--active-pink {
  color: var(--pink);
}

input:checked + .toggle--active-red {
  color: var(--red);
}

input:checked + .toggle--active-orange {
  color: var(--orange);
}

input:checked + .toggle--active-yellow {
  color: var(--yellow);
}

input:checked + .toggle--active-green {
  color: var(--green);
}

input:checked + .toggle--active-blue {
  color: var(--blue);
}

input:checked + .toggle--active-purple {
  color: var(--purple);
}

input:checked + .toggle--active-darken25 {
  color: var(--darken25);
}

input:checked + .toggle--active-darken50 {
  color: var(--darken50);
}

input:checked + .toggle--active-darken75 {
  color: var(--darken75);
}

input:checked + .toggle--active-lighten25 {
  color: var(--lighten25);
}

input:checked + .toggle--active-lighten50 {
  color: var(--lighten50);
}

input:checked + .toggle--active-lighten75 {
  color: var(--lighten75);
}

input:checked + .toggle--active-white {
  color: var(--white);
}

input:checked + .toggle--active-transparent {
  color: var(--transparent);
}

.switch--gray {
  color: var(--gray);
}

input:checked + .switch--gray {
  background-color: var(--gray);
}

input:checked + .switch--dot-gray::after {
  background-color: var(--gray);
}

.switch--pink {
  color: var(--pink);
}

input:checked + .switch--pink {
  background-color: var(--pink);
}

input:checked + .switch--dot-pink::after {
  background-color: var(--pink);
}

.switch--red {
  color: var(--red);
}

input:checked + .switch--red {
  background-color: var(--red);
}

input:checked + .switch--dot-red::after {
  background-color: var(--red);
}

.switch--orange {
  color: var(--orange);
}

input:checked + .switch--orange {
  background-color: var(--orange);
}

input:checked + .switch--dot-orange::after {
  background-color: var(--orange);
}

.switch--yellow {
  color: var(--yellow);
}

input:checked + .switch--yellow {
  background-color: var(--yellow);
}

input:checked + .switch--dot-yellow::after {
  background-color: var(--yellow);
}

.switch--green {
  color: var(--green);
}

input:checked + .switch--green {
  background-color: var(--green);
}

input:checked + .switch--dot-green::after {
  background-color: var(--green);
}

.switch--blue {
  color: var(--blue);
}

input:checked + .switch--blue {
  background-color: var(--blue);
}

input:checked + .switch--dot-blue::after {
  background-color: var(--blue);
}

.switch--purple {
  color: var(--purple);
}

input:checked + .switch--purple {
  background-color: var(--purple);
}

input:checked + .switch--dot-purple::after {
  background-color: var(--purple);
}

.switch--darken25 {
  color: var(--darken25);
}

input:checked + .switch--darken25 {
  background-color: var(--darken25);
}

input:checked + .switch--dot-darken25::after {
  background-color: var(--darken25);
}

.switch--darken50 {
  color: var(--darken50);
}

input:checked + .switch--darken50 {
  background-color: var(--darken50);
}

input:checked + .switch--dot-darken50::after {
  background-color: var(--darken50);
}

.switch--darken75 {
  color: var(--darken75);
}

input:checked + .switch--darken75 {
  background-color: var(--darken75);
}

input:checked + .switch--dot-darken75::after {
  background-color: var(--darken75);
}

.switch--lighten25 {
  color: var(--lighten25);
}

input:checked + .switch--lighten25 {
  background-color: var(--lighten25);
}

input:checked + .switch--dot-lighten25::after {
  background-color: var(--lighten25);
}

.switch--lighten50 {
  color: var(--lighten50);
}

input:checked + .switch--lighten50 {
  background-color: var(--lighten50);
}

input:checked + .switch--dot-lighten50::after {
  background-color: var(--lighten50);
}

.switch--lighten75 {
  color: var(--lighten75);
}

input:checked + .switch--lighten75 {
  background-color: var(--lighten75);
}

input:checked + .switch--dot-lighten75::after {
  background-color: var(--lighten75);
}

.switch--white {
  color: var(--white);
}

input:checked + .switch--white {
  background-color: var(--white);
}

input:checked + .switch--dot-white::after {
  background-color: var(--white);
}

.switch--transparent {
  color: var(--transparent);
}

input:checked + .switch--transparent {
  background-color: var(--transparent);
}

input:checked + .switch--dot-transparent::after {
  background-color: var(--transparent);
}

.range--gray > input { color: var(--gray); }

.range--pink > input { color: var(--pink); }

.range--red > input { color: var(--red); }

.range--orange > input { color: var(--orange); }

.range--yellow > input { color: var(--yellow); }

.range--green > input { color: var(--green); }

.range--blue > input { color: var(--blue); }

.range--purple > input { color: var(--purple); }

.range--darken25 > input { color: var(--darken25); }

.range--darken50 > input { color: var(--darken50); }

.range--darken75 > input { color: var(--darken75); }

.range--lighten25 > input { color: var(--lighten25); }

.range--lighten50 > input { color: var(--lighten50); }

.range--lighten75 > input { color: var(--lighten75); }

.range--white > input { color: var(--white); }

.range--transparent > input { color: var(--transparent); }

/**
 * @section Text colors
 * @memberof Colors
 */

/**
 * Apply a text color.
 *
 * @group
 * @memberof Text colors
 * @example
 * <div class='txt-s grid'>
 *   <div class='col w-1/4 color-gray-dark'>color-gray-dark</div>
 *   <div class='col w-1/4 color-gray-deep'>color-gray-deep</div>
 *   <div class='col w-1/4 color-gray'>color-gray</div>
 *   <div class='col w-1/4 color-gray-light'>color-gray-light</div>
 *   <div class='col w-1/4 color-gray-lighter'>color-gray-lighter</div>
 *   <div class='col w-1/4 color-gray-faint'>color-gray-faint</div>
 *   <div class='col w-1/4 color-pink-dark'>color-pink-dark</div>
 *   <div class='col w-1/4 color-pink-deep'>color-pink-deep</div>
 *   <div class='col w-1/4 color-pink'>color-pink</div>
 *   <div class='col w-1/4 color-pink-light'>color-pink-light</div>
 *   <div class='col w-1/4 color-pink-lighter'>color-pink-lighter</div>
 *   <div class='col w-1/4 color-pink-faint'>color-pink-faint</div>
 *   <div class='col w-1/4 color-red-dark'>color-red-dark</div>
 *   <div class='col w-1/4 color-red-deep'>color-red-deep</div>
 *   <div class='col w-1/4 color-red'>color-red</div>
 *   <div class='col w-1/4 color-red-light'>color-red-light</div>
 *   <div class='col w-1/4 color-red-lighter'>color-red-lighter</div>
 *   <div class='col w-1/4 color-red-faint'>color-red-faint</div>
 *   <div class='col w-1/4 color-orange-dark'>color-orange-dark</div>
 *   <div class='col w-1/4 color-orange-deep'>color-orange-deep</div>
 *   <div class='col w-1/4 color-orange'>color-orange</div>
 *   <div class='col w-1/4 color-orange-light'>color-orange-light</div>
 *   <div class='col w-1/4 color-orange-lighter'>color-orange-lighter</div>
 *   <div class='col w-1/4 color-orange-faint'>color-orange-faint</div>
 *   <div class='col w-1/4 color-yellow-dark'>color-yellow-dark</div>
 *   <div class='col w-1/4 color-yellow-deep'>color-yellow-deep</div>
 *   <div class='col w-1/4 color-yellow'>color-yellow</div>
 *   <div class='col w-1/4 color-yellow-light'>color-yellow-light</div>
 *   <div class='col w-1/4 color-yellow-lighter'>color-yellow-lighter</div>
 *   <div class='col w-1/4 color-yellow-faint'>color-yellow-faint</div>
 *   <div class='col w-1/4 color-green-dark'>color-green-dark</div>
 *   <div class='col w-1/4 color-green-deep'>color-green-deep</div>
 *   <div class='col w-1/4 color-green'>color-green</div>
 *   <div class='col w-1/4 color-green-light'>color-green-light</div>
 *   <div class='col w-1/4 color-green-lighter'>color-green-lighter</div>
 *   <div class='col w-1/4 color-green-faint'>color-green-faint</div>
 *   <div class='col w-1/4 color-blue-dark'>color-blue-dark</div>
 *   <div class='col w-1/4 color-blue-deep'>color-blue-deep</div>
 *   <div class='col w-1/4 color-blue'>color-blue</div>
 *   <div class='col w-1/4 color-blue-light'>color-blue-light</div>
 *   <div class='col w-1/4 color-blue-lighter'>color-blue-lighter</div>
 *   <div class='col w-1/4 color-blue-faint'>color-blue-faint</div>
 *   <div class='col w-1/4 color-purple-dark'>color-purple-dark</div>
 *   <div class='col w-1/4 color-purple-deep'>color-purple-deep</div>
 *   <div class='col w-1/4 color-purple'>color-purple</div>
 *   <div class='col w-1/4 color-purple-light'>color-purple-light</div>
 *   <div class='col w-1/4 color-purple-lighter'>color-purple-lighter</div>
 *   <div class='col w-1/4 color-purple-faint'>color-purple-faint</div>
 *   <div class='col w-1/4 color-darken10'>color-darken10</div>
 *   <div class='col w-1/4 color-darken25'>color-darken25</div>
 *   <div class='col w-1/4 color-darken50'>color-darken50</div>
 *   <div class='col w-1/4 color-darken75'>color-darken75</div>
 *   <div class='col w-1/4 color-lighten10'>color-lighten10</div>
 *   <div class='col w-1/4 color-lighten25'>color-lighten25</div>
 *   <div class='col w-1/4 color-lighten50'>color-lighten50</div>
 *   <div class='col w-1/4 color-lighten75'>color-lighten75</div>
 *   <div class='col w-1/4 color-white'>color-white</div>
 *   <div class='col w-1/4 color-black'>color-black</div>
 *   <div class='col w-1/4 color-transparent'>color-transparent</div>
 *   <div class='col w-1/4 color-text'>color-text</div>
 * </div>
 */
.color-gray-dark {
  color: var(--gray-dark) !important;
}

.color-gray-deep {
  color: var(--gray-deep) !important;
}

.color-gray {
  color: var(--gray) !important;
}

.color-gray-light {
  color: var(--gray-light) !important;
}

.color-gray-lighter {
  color: var(--gray-lighter) !important;
}

.color-gray-faint {
  color: var(--gray-faint) !important;
}

.color-pink-dark {
  color: var(--pink-dark) !important;
}

.color-pink-deep {
  color: var(--pink-deep) !important;
}

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

.color-pink-light {
  color: var(--pink-light) !important;
}

.color-pink-lighter {
  color: var(--pink-lighter) !important;
}

.color-pink-faint {
  color: var(--pink-faint) !important;
}

.color-red-dark {
  color: var(--red-dark) !important;
}

.color-red-deep {
  color: var(--red-deep) !important;
}

.color-red {
  color: var(--red) !important;
}

.color-red-light {
  color: var(--red-light) !important;
}

.color-red-lighter {
  color: var(--red-lighter) !important;
}

.color-red-faint {
  color: var(--red-faint) !important;
}

.color-orange-dark {
  color: var(--orange-dark) !important;
}

.color-orange-deep {
  color: var(--orange-deep) !important;
}

.color-orange {
  color: var(--orange) !important;
}

.color-orange-light {
  color: var(--orange-light) !important;
}

.color-orange-lighter {
  color: var(--orange-lighter) !important;
}

.color-orange-faint {
  color: var(--orange-faint) !important;
}

.color-yellow-dark {
  color: var(--yellow-dark) !important;
}

.color-yellow-deep {
  color: var(--yellow-deep) !important;
}

.color-yellow {
  color: var(--yellow) !important;
}

.color-yellow-light {
  color: var(--yellow-light) !important;
}

.color-yellow-lighter {
  color: var(--yellow-lighter) !important;
}

.color-yellow-faint {
  color: var(--yellow-faint) !important;
}

.color-green-dark {
  color: var(--green-dark) !important;
}

.color-green-deep {
  color: var(--green-deep) !important;
}

.color-green {
  color: var(--green) !important;
}

.color-green-light {
  color: var(--green-light) !important;
}

.color-green-lighter {
  color: var(--green-lighter) !important;
}

.color-green-faint {
  color: var(--green-faint) !important;
}

.color-blue-dark {
  color: var(--blue-dark) !important;
}

.color-blue-deep {
  color: var(--blue-deep) !important;
}

.color-blue {
  color: var(--blue) !important;
}

.color-blue-light {
  color: var(--blue-light) !important;
}

.color-blue-lighter {
  color: var(--blue-lighter) !important;
}

.color-blue-faint {
  color: var(--blue-faint) !important;
}

.color-purple-dark {
  color: var(--purple-dark) !important;
}

.color-purple-deep {
  color: var(--purple-deep) !important;
}

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

.color-purple-light {
  color: var(--purple-light) !important;
}

.color-purple-lighter {
  color: var(--purple-lighter) !important;
}

.color-purple-faint {
  color: var(--purple-faint) !important;
}

.color-darken10 {
  color: var(--darken10) !important;
}

.color-darken25 {
  color: var(--darken25) !important;
}

.color-darken50 {
  color: var(--darken50) !important;
}

.color-darken75 {
  color: var(--darken75) !important;
}

.color-lighten10 {
  color: var(--lighten10) !important;
}

.color-lighten25 {
  color: var(--lighten25) !important;
}

.color-lighten50 {
  color: var(--lighten50) !important;
}

.color-lighten75 {
  color: var(--lighten75) !important;
}

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

.color-black {
  color: var(--black) !important;
}

.color-transparent {
  color: var(--transparent) !important;
}

.color-text {
  color: var(--gray-deep) !important;
}

/** @endgroup */

/**
 * @section Background colors
 * @memberof Colors
 */

/**
 * Apply a background color.
 *
 * @group
 * @memberof Background colors
 * @example
 * <div class='grid'>
 *   <div class='col w-1/4 bg-gray-dark py6 px6'>bg-gray-dark</div>
 *   <div class='col w-1/4 bg-gray-deep py6 px6'>bg-gray-deep</div>
 *   <div class='col w-1/4 bg-gray py6 px6'>bg-gray</div>
 *   <div class='col w-1/4 bg-gray-light py6 px6'>bg-gray-light</div>
 *   <div class='col w-1/4 bg-gray-lighter py6 px6'>bg-gray-lighter</div>
 *   <div class='col w-1/4 bg-gray-faint py6 px6'>bg-gray-faint</div>
 *   <div class='col w-1/4 bg-pink-dark py6 px6'>bg-pink-dark</div>
 *   <div class='col w-1/4 bg-pink-deep py6 px6'>bg-pink-deep</div>
 *   <div class='col w-1/4 bg-pink py6 px6'>bg-pink</div>
 *   <div class='col w-1/4 bg-pink-light py6 px6'>bg-pink-light</div>
 *   <div class='col w-1/4 bg-pink-lighter py6 px6'>bg-pink-lighter</div>
 *   <div class='col w-1/4 bg-pink-faint py6 px6'>bg-pink-faint</div>
 *   <div class='col w-1/4 bg-red-dark py6 px6'>bg-red-dark</div>
 *   <div class='col w-1/4 bg-red-deep py6 px6'>bg-red-deep</div>
 *   <div class='col w-1/4 bg-red py6 px6'>bg-red</div>
 *   <div class='col w-1/4 bg-red-light py6 px6'>bg-red-light</div>
 *   <div class='col w-1/4 bg-red-lighter py6 px6'>bg-red-lighter</div>
 *   <div class='col w-1/4 bg-red-faint py6 px6'>bg-red-faint</div>
 *   <div class='col w-1/4 bg-orange-dark py6 px6'>bg-orange-dark</div>
 *   <div class='col w-1/4 bg-orange-deep py6 px6'>bg-orange-deep</div>
 *   <div class='col w-1/4 bg-orange py6 px6'>bg-orange</div>
 *   <div class='col w-1/4 bg-orange-light py6 px6'>bg-orange-light</div>
 *   <div class='col w-1/4 bg-orange-lighter py6 px6'>bg-orange-lighter</div>
 *   <div class='col w-1/4 bg-orange-faint py6 px6'>bg-orange-faint</div>
 *   <div class='col w-1/4 bg-yellow-dark py6 px6'>bg-yellow-dark</div>
 *   <div class='col w-1/4 bg-yellow-deep py6 px6'>bg-yellow-deep</div>
 *   <div class='col w-1/4 bg-yellow py6 px6'>bg-yellow</div>
 *   <div class='col w-1/4 bg-yellow-light py6 px6'>bg-yellow-light</div>
 *   <div class='col w-1/4 bg-yellow-lighter py6 px6'>bg-yellow-lighter</div>
 *   <div class='col w-1/4 bg-yellow-faint py6 px6'>bg-yellow-faint</div>
 *   <div class='col w-1/4 bg-green-dark py6 px6'>bg-green-dark</div>
 *   <div class='col w-1/4 bg-green-deep py6 px6'>bg-green-deep</div>
 *   <div class='col w-1/4 bg-green py6 px6'>bg-green</div>
 *   <div class='col w-1/4 bg-green-light py6 px6'>bg-green-light</div>
 *   <div class='col w-1/4 bg-green-lighter py6 px6'>bg-green-lighter</div>
 *   <div class='col w-1/4 bg-green-faint py6 px6'>bg-green-faint</div>
 *   <div class='col w-1/4 bg-blue-dark py6 px6'>bg-blue-dark</div>
 *   <div class='col w-1/4 bg-blue-deep py6 px6'>bg-blue-deep</div>
 *   <div class='col w-1/4 bg-blue py6 px6'>bg-blue</div>
 *   <div class='col w-1/4 bg-blue-light py6 px6'>bg-blue-light</div>
 *   <div class='col w-1/4 bg-blue-lighter py6 px6'>bg-blue-lighter</div>
 *   <div class='col w-1/4 bg-blue-faint py6 px6'>bg-blue-faint</div>
 *   <div class='col w-1/4 bg-purple-dark py6 px6'>bg-purple-dark</div>
 *   <div class='col w-1/4 bg-purple-deep py6 px6'>bg-purple-deep</div>
 *   <div class='col w-1/4 bg-purple py6 px6'>bg-purple</div>
 *   <div class='col w-1/4 bg-purple-light py6 px6'>bg-purple-light</div>
 *   <div class='col w-1/4 bg-purple-lighter py6 px6'>bg-purple-lighter</div>
 *   <div class='col w-1/4 bg-purple-faint py6 px6'>bg-purple-faint</div>
 *   <div class='col w-1/4 bg-darken5 py6 px6'>bg-darken5</div>
 *   <div class='col w-1/4 bg-darken10 py6 px6'>bg-darken10</div>
 *   <div class='col w-1/4 bg-darken25 py6 px6'>bg-darken25</div>
 *   <div class='col w-1/4 bg-darken50 py6 px6'>bg-darken50</div>
 *   <div class='col w-1/4 bg-darken75 py6 px6'>bg-darken75</div>
 *   <div class='col w-1/4 bg-lighten5 py6 px6'>bg-lighten5</div>
 *   <div class='col w-1/4 bg-lighten10 py6 px6'>bg-lighten10</div>
 *   <div class='col w-1/4 bg-lighten25 py6 px6'>bg-lighten25</div>
 *   <div class='col w-1/4 bg-lighten50 py6 px6'>bg-lighten50</div>
 *   <div class='col w-1/4 bg-lighten75 py6 px6'>bg-lighten75</div>
 *   <div class='col w-1/4 bg-white py6 px6'>bg-white</div>
 *   <div class='col w-1/4 bg-black py6 px6'>bg-black</div>
 *   <div class='col w-1/4 bg-transparent py6 px6'>bg-transparent</div>
 * </div>
 */
.bg-gray-dark {
  background-color: var(--gray-dark) !important;
}

.bg-gray-deep {
  background-color: var(--gray-deep) !important;
}

.bg-gray {
  background-color: var(--gray) !important;
}

.bg-gray-light {
  background-color: var(--gray-light) !important;
}

.bg-gray-lighter {
  background-color: var(--gray-lighter) !important;
}

.bg-gray-faint {
  background-color: var(--gray-faint) !important;
}

.bg-pink-dark {
  background-color: var(--pink-dark) !important;
}

.bg-pink-deep {
  background-color: var(--pink-deep) !important;
}

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

.bg-pink-light {
  background-color: var(--pink-light) !important;
}

.bg-pink-lighter {
  background-color: var(--pink-lighter) !important;
}

.bg-pink-faint {
  background-color: var(--pink-faint) !important;
}

.bg-red-dark {
  background-color: var(--red-dark) !important;
}

.bg-red-deep {
  background-color: var(--red-deep) !important;
}

.bg-red {
  background-color: var(--red) !important;
}

.bg-red-light {
  background-color: var(--red-light) !important;
}

.bg-red-lighter {
  background-color: var(--red-lighter) !important;
}

.bg-red-faint {
  background-color: var(--red-faint) !important;
}

.bg-orange-dark {
  background-color: var(--orange-dark) !important;
}

.bg-orange-deep {
  background-color: var(--orange-deep) !important;
}

.bg-orange {
  background-color: var(--orange) !important;
}

.bg-orange-light {
  background-color: var(--orange-light) !important;
}

.bg-orange-lighter {
  background-color: var(--orange-lighter) !important;
}

.bg-orange-faint {
  background-color: var(--orange-faint) !important;
}

.bg-yellow-dark {
  background-color: var(--yellow-dark) !important;
}

.bg-yellow-deep {
  background-color: var(--yellow-deep) !important;
}

.bg-yellow {
  background-color: var(--yellow) !important;
}

.bg-yellow-light {
  background-color: var(--yellow-light) !important;
}

.bg-yellow-lighter {
  background-color: var(--yellow-lighter) !important;
}

.bg-yellow-faint {
  background-color: var(--yellow-faint) !important;
}

.bg-green-dark {
  background-color: var(--green-dark) !important;
}

.bg-green-deep {
  background-color: var(--green-deep) !important;
}

.bg-green {
  background-color: var(--green) !important;
}

.bg-green-light {
  background-color: var(--green-light) !important;
}

.bg-green-lighter {
  background-color: var(--green-lighter) !important;
}

.bg-green-faint {
  background-color: var(--green-faint) !important;
}

.bg-blue-dark {
  background-color: var(--blue-dark) !important;
}

.bg-blue-deep {
  background-color: var(--blue-deep) !important;
}

.bg-blue {
  background-color: var(--blue) !important;
}

.bg-blue-light {
  background-color: var(--blue-light) !important;
}

.bg-blue-lighter {
  background-color: var(--blue-lighter) !important;
}

.bg-blue-faint {
  background-color: var(--blue-faint) !important;
}

.bg-purple-dark {
  background-color: var(--purple-dark) !important;
}

.bg-purple-deep {
  background-color: var(--purple-deep) !important;
}

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

.bg-purple-light {
  background-color: var(--purple-light) !important;
}

.bg-purple-lighter {
  background-color: var(--purple-lighter) !important;
}

.bg-purple-faint {
  background-color: var(--purple-faint) !important;
}

.bg-darken5 {
  background-color: var(--darken5) !important;
}

.bg-darken10 {
  background-color: var(--darken10) !important;
}

.bg-darken25 {
  background-color: var(--darken25) !important;
}

.bg-darken50 {
  background-color: var(--darken50) !important;
}

.bg-darken75 {
  background-color: var(--darken75) !important;
}

.bg-lighten5 {
  background-color: var(--lighten5) !important;
}

.bg-lighten10 {
  background-color: var(--lighten10) !important;
}

.bg-lighten25 {
  background-color: var(--lighten25) !important;
}

.bg-lighten50 {
  background-color: var(--lighten50) !important;
}

.bg-lighten75 {
  background-color: var(--lighten75) !important;
}

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

.bg-black {
  background-color: var(--black) !important;
}

.bg-transparent {
  background-color: var(--transparent) !important;
}

/** @endgroup */

.link--gray {
  color: var(--gray);
}

.link--gray:hover,
.link--gray.is-active {
  color: var(--gray-deep);
}

.link--pink {
  color: var(--pink);
}

.link--pink:hover,
.link--pink.is-active {
  color: var(--pink-deep);
}

.link--red {
  color: var(--red);
}

.link--red:hover,
.link--red.is-active {
  color: var(--red-deep);
}

.link--orange {
  color: var(--orange);
}

.link--orange:hover,
.link--orange.is-active {
  color: var(--orange-deep);
}

.link--yellow {
  color: var(--yellow);
}

.link--yellow:hover,
.link--yellow.is-active {
  color: var(--yellow-deep);
}

.link--green {
  color: var(--green);
}

.link--green:hover,
.link--green.is-active {
  color: var(--green-deep);
}

.link--blue {
  color: var(--blue);
}

.link--blue:hover,
.link--blue.is-active {
  color: var(--blue-deep);
}

.link--purple {
  color: var(--purple);
}

.link--purple:hover,
.link--purple.is-active {
  color: var(--purple-deep);
}

.link--darken25 {
  color: var(--darken25);
}

.link--darken25:hover,
.link--darken25.is-active {
  color: var(--darken50);
}

.link--darken50 {
  color: var(--darken50);
}

.link--darken50:hover,
.link--darken50.is-active {
  color: var(--darken75);
}

.link--darken75 {
  color: var(--darken75);
}

.link--darken75:hover,
.link--darken75.is-active {
  color: var(--black);
}

.link--lighten25 {
  color: var(--lighten25);
}

.link--lighten25:hover,
.link--lighten25.is-active {
  color: var(--lighten50);
}

.link--lighten50 {
  color: var(--lighten50);
}

.link--lighten50:hover,
.link--lighten50.is-active {
  color: var(--lighten75);
}

.link--lighten75 {
  color: var(--lighten75);
}

.link--lighten75:hover,
.link--lighten75.is-active {
  color: var(--white);
}

.link--white {
  color: var(--white);
}

.link--white:hover,
.link--white.is-active {
  color: var(--lighten75);
}

.link--transparent {
  color: var(--transparent);
}

.link--transparent:hover,
.link--transparent.is-active {
  color: var(--darken10);
}

/**
 * Apply a [color](#Colors) to a border.
 *
 * @group
 * @memberof Borders
 * @example
 * <div class='border border--red'>border--red</div>
 */
.border--gray-dark {
  border-color: var(--gray-dark) !important;
}

.border--gray-deep {
  border-color: var(--gray-deep) !important;
}

.border--gray {
  border-color: var(--gray) !important;
}

.border--gray-light {
  border-color: var(--gray-light) !important;
}

.border--gray-lighter {
  border-color: var(--gray-lighter) !important;
}

.border--gray-faint {
  border-color: var(--gray-faint) !important;
}

.border--pink-dark {
  border-color: var(--pink-dark) !important;
}

.border--pink-deep {
  border-color: var(--pink-deep) !important;
}

.border--pink {
  border-color: var(--pink) !important;
}

.border--pink-light {
  border-color: var(--pink-light) !important;
}

.border--pink-lighter {
  border-color: var(--pink-lighter) !important;
}

.border--pink-faint {
  border-color: var(--pink-faint) !important;
}

.border--red-dark {
  border-color: var(--red-dark) !important;
}

.border--red-deep {
  border-color: var(--red-deep) !important;
}

.border--red {
  border-color: var(--red) !important;
}

.border--red-light {
  border-color: var(--red-light) !important;
}

.border--red-lighter {
  border-color: var(--red-lighter) !important;
}

.border--red-faint {
  border-color: var(--red-faint) !important;
}

.border--orange-dark {
  border-color: var(--orange-dark) !important;
}

.border--orange-deep {
  border-color: var(--orange-deep) !important;
}

.border--orange {
  border-color: var(--orange) !important;
}

.border--orange-light {
  border-color: var(--orange-light) !important;
}

.border--orange-lighter {
  border-color: var(--orange-lighter) !important;
}

.border--orange-faint {
  border-color: var(--orange-faint) !important;
}

.border--yellow-dark {
  border-color: var(--yellow-dark) !important;
}

.border--yellow-deep {
  border-color: var(--yellow-deep) !important;
}

.border--yellow {
  border-color: var(--yellow) !important;
}

.border--yellow-light {
  border-color: var(--yellow-light) !important;
}

.border--yellow-lighter {
  border-color: var(--yellow-lighter) !important;
}

.border--yellow-faint {
  border-color: var(--yellow-faint) !important;
}

.border--green-dark {
  border-color: var(--green-dark) !important;
}

.border--green-deep {
  border-color: var(--green-deep) !important;
}

.border--green {
  border-color: var(--green) !important;
}

.border--green-light {
  border-color: var(--green-light) !important;
}

.border--green-lighter {
  border-color: var(--green-lighter) !important;
}

.border--green-faint {
  border-color: var(--green-faint) !important;
}

.border--blue-dark {
  border-color: var(--blue-dark) !important;
}

.border--blue-deep {
  border-color: var(--blue-deep) !important;
}

.border--blue {
  border-color: var(--blue) !important;
}

.border--blue-light {
  border-color: var(--blue-light) !important;
}

.border--blue-lighter {
  border-color: var(--blue-lighter) !important;
}

.border--blue-faint {
  border-color: var(--blue-faint) !important;
}

.border--purple-dark {
  border-color: var(--purple-dark) !important;
}

.border--purple-deep {
  border-color: var(--purple-deep) !important;
}

.border--purple {
  border-color: var(--purple) !important;
}

.border--purple-light {
  border-color: var(--purple-light) !important;
}

.border--purple-lighter {
  border-color: var(--purple-lighter) !important;
}

.border--purple-faint {
  border-color: var(--purple-faint) !important;
}

.border--darken10 {
  border-color: var(--darken10) !important;
}

.border--darken25 {
  border-color: var(--darken25) !important;
}

.border--darken50 {
  border-color: var(--darken50) !important;
}

.border--darken75 {
  border-color: var(--darken75) !important;
}

.border--lighten10 {
  border-color: var(--lighten10) !important;
}

.border--lighten25 {
  border-color: var(--lighten25) !important;
}

.border--lighten50 {
  border-color: var(--lighten50) !important;
}

.border--lighten75 {
  border-color: var(--lighten75) !important;
}

.border--white {
  border-color: var(--white) !important;
}

.border--black {
  border-color: var(--black) !important;
}

.border--transparent {
  border-color: var(--transparent) !important;
}

/** @endgroup */

/**
 * Apply a box shadow.
 *
 * @group
 * @memberof Shadows
 * @example
 * <div class='shadow-darken25'>shadow-darken25</div>
 */
.shadow-darken10 {
  box-shadow: 0 2px 10px 0 var(--darken10) !important;
}

.shadow-darken25 {
  box-shadow: 0 2px 10px 0 var(--darken25) !important;
}

.shadow-darken50 {
  box-shadow: 0 2px 10px 0 var(--darken50) !important;
}

.shadow-darken75 {
  box-shadow: 0 2px 10px 0 var(--darken75) !important;
}

.shadow-lighten10 {
  box-shadow: 0 2px 10px 0 var(--lighten10) !important;
}

.shadow-lighten25 {
  box-shadow: 0 2px 10px 0 var(--lighten25) !important;
}

.shadow-lighten50 {
  box-shadow: 0 2px 10px 0 var(--lighten50) !important;
}

.shadow-lighten75 {
  box-shadow: 0 2px 10px 0 var(--lighten75) !important;
}

/** @endgroup */

/**
 * Apply a larger box shadow.
 *
 * @group
 * @memberof Shadows
 * @example
 * <div class='shadow-darken25-bold'>shadow-darken25-bold</div>
 */
.shadow-darken10-bold {
  box-shadow: 0 6px 30px 0 var(--darken10) !important;
}

.shadow-darken25-bold {
  box-shadow: 0 6px 30px 0 var(--darken25) !important;
}

.shadow-darken50-bold {
  box-shadow: 0 6px 30px 0 var(--darken50) !important;
}

.shadow-darken75-bold {
  box-shadow: 0 6px 30px 0 var(--darken75) !important;
}

.shadow-lighten10-bold {
  box-shadow: 0 6px 30px 0 var(--lighten10) !important;
}

.shadow-lighten25-bold {
  box-shadow: 0 6px 30px 0 var(--lighten25) !important;
}

.shadow-lighten50-bold {
  box-shadow: 0 6px 30px 0 var(--lighten50) !important;
}

.shadow-lighten75-bold {
  box-shadow: 0 6px 30px 0 var(--lighten75) !important;
}

/** @endgroup */

/**
 * Apply a box shadow on hover and active states.
 *
 * @group
 * @memberof Shadows
 * @example
 * <div class='shadow-darken25-on-hover'>shadow-darken25-on-hover</div>
 * <div class='shadow-darken25-on-active'>shadow-darken25-on-active (not active)</div>
 * <div class='shadow-darken25-on-active is-active'>shadow-darken25-on-active (active)</div>
 */
.shadow-darken10-on-hover:hover,
.shadow-darken10-on-active.is-active,
.shadow-darken10-on-active.is-active:hover {
  box-shadow: 0 2px 10px 0 var(--darken10) !important;
}
.shadow-darken10-bold-on-hover:hover,
.shadow-darken10-bold-on-active.is-active,
.shadow-darken10-bold-on-active.is-active:hover {
  box-shadow: 0 6px 30px 0 var(--darken10) !important;
}

.shadow-darken25-on-hover:hover,
.shadow-darken25-on-active.is-active,
.shadow-darken25-on-active.is-active:hover {
  box-shadow: 0 2px 10px 0 var(--darken25) !important;
}
.shadow-darken25-bold-on-hover:hover,
.shadow-darken25-bold-on-active.is-active,
.shadow-darken25-bold-on-active.is-active:hover {
  box-shadow: 0 6px 30px 0 var(--darken25) !important;
}

.shadow-darken50-on-hover:hover,
.shadow-darken50-on-active.is-active,
.shadow-darken50-on-active.is-active:hover {
  box-shadow: 0 2px 10px 0 var(--darken50) !important;
}
.shadow-darken50-bold-on-hover:hover,
.shadow-darken50-bold-on-active.is-active,
.shadow-darken50-bold-on-active.is-active:hover {
  box-shadow: 0 6px 30px 0 var(--darken50) !important;
}

.shadow-darken75-on-hover:hover,
.shadow-darken75-on-active.is-active,
.shadow-darken75-on-active.is-active:hover {
  box-shadow: 0 2px 10px 0 var(--darken75) !important;
}
.shadow-darken75-bold-on-hover:hover,
.shadow-darken75-bold-on-active.is-active,
.shadow-darken75-bold-on-active.is-active:hover {
  box-shadow: 0 6px 30px 0 var(--darken75) !important;
}

.shadow-lighten10-on-hover:hover,
.shadow-lighten10-on-active.is-active,
.shadow-lighten10-on-active.is-active:hover {
  box-shadow: 0 2px 10px 0 var(--lighten10) !important;
}
.shadow-lighten10-bold-on-hover:hover,
.shadow-lighten10-bold-on-active.is-active,
.shadow-lighten10-bold-on-active.is-active:hover {
  box-shadow: 0 6px 30px 0 var(--lighten10) !important;
}

.shadow-lighten25-on-hover:hover,
.shadow-lighten25-on-active.is-active,
.shadow-lighten25-on-active.is-active:hover {
  box-shadow: 0 2px 10px 0 var(--lighten25) !important;
}
.shadow-lighten25-bold-on-hover:hover,
.shadow-lighten25-bold-on-active.is-active,
.shadow-lighten25-bold-on-active.is-active:hover {
  box-shadow: 0 6px 30px 0 var(--lighten25) !important;
}

.shadow-lighten50-on-hover:hover,
.shadow-lighten50-on-active.is-active,
.shadow-lighten50-on-active.is-active:hover {
  box-shadow: 0 2px 10px 0 var(--lighten50) !important;
}
.shadow-lighten50-bold-on-hover:hover,
.shadow-lighten50-bold-on-active.is-active,
.shadow-lighten50-bold-on-active.is-active:hover {
  box-shadow: 0 6px 30px 0 var(--lighten50) !important;
}

.shadow-lighten75-on-hover:hover,
.shadow-lighten75-on-active.is-active,
.shadow-lighten75-on-active.is-active:hover {
  box-shadow: 0 2px 10px 0 var(--lighten75) !important;
}
.shadow-lighten75-bold-on-hover:hover,
.shadow-lighten75-bold-on-active.is-active,
.shadow-lighten75-bold-on-active.is-active:hover {
  box-shadow: 0 6px 30px 0 var(--lighten75) !important;
}

/** @endgroup */

/**
 * Apply a background color on hover and active states.
 *
 * @group
 * @memberof Background colors
 * @example
 * <div class='bg-darken25-on-hover'>bg-darken25-on-hover</div>
 * <div class='bg-darken25-on-active'>bg-darken25-on-active (not active)</div>
 * <div class='bg-darken25-on-active is-active'>bg-darken25-on-active (active)</div>
 */
.bg-gray-dark-on-hover:hover,
.bg-gray-dark-on-active.is-active,
.bg-gray-dark-on-active.is-active:hover {
  background-color: var(--gray-dark) !important;
}

.bg-gray-deep-on-hover:hover,
.bg-gray-deep-on-active.is-active,
.bg-gray-deep-on-active.is-active:hover {
  background-color: var(--gray-deep) !important;
}

.bg-gray-on-hover:hover,
.bg-gray-on-active.is-active,
.bg-gray-on-active.is-active:hover {
  background-color: var(--gray) !important;
}

.bg-gray-light-on-hover:hover,
.bg-gray-light-on-active.is-active,
.bg-gray-light-on-active.is-active:hover {
  background-color: var(--gray-light) !important;
}

.bg-gray-lighter-on-hover:hover,
.bg-gray-lighter-on-active.is-active,
.bg-gray-lighter-on-active.is-active:hover {
  background-color: var(--gray-lighter) !important;
}

.bg-gray-faint-on-hover:hover,
.bg-gray-faint-on-active.is-active,
.bg-gray-faint-on-active.is-active:hover {
  background-color: var(--gray-faint) !important;
}

.bg-pink-dark-on-hover:hover,
.bg-pink-dark-on-active.is-active,
.bg-pink-dark-on-active.is-active:hover {
  background-color: var(--pink-dark) !important;
}

.bg-pink-deep-on-hover:hover,
.bg-pink-deep-on-active.is-active,
.bg-pink-deep-on-active.is-active:hover {
  background-color: var(--pink-deep) !important;
}

.bg-pink-on-hover:hover,
.bg-pink-on-active.is-active,
.bg-pink-on-active.is-active:hover {
  background-color: var(--pink) !important;
}

.bg-pink-light-on-hover:hover,
.bg-pink-light-on-active.is-active,
.bg-pink-light-on-active.is-active:hover {
  background-color: var(--pink-light) !important;
}

.bg-pink-lighter-on-hover:hover,
.bg-pink-lighter-on-active.is-active,
.bg-pink-lighter-on-active.is-active:hover {
  background-color: var(--pink-lighter) !important;
}

.bg-pink-faint-on-hover:hover,
.bg-pink-faint-on-active.is-active,
.bg-pink-faint-on-active.is-active:hover {
  background-color: var(--pink-faint) !important;
}

.bg-red-dark-on-hover:hover,
.bg-red-dark-on-active.is-active,
.bg-red-dark-on-active.is-active:hover {
  background-color: var(--red-dark) !important;
}

.bg-red-deep-on-hover:hover,
.bg-red-deep-on-active.is-active,
.bg-red-deep-on-active.is-active:hover {
  background-color: var(--red-deep) !important;
}

.bg-red-on-hover:hover,
.bg-red-on-active.is-active,
.bg-red-on-active.is-active:hover {
  background-color: var(--red) !important;
}

.bg-red-light-on-hover:hover,
.bg-red-light-on-active.is-active,
.bg-red-light-on-active.is-active:hover {
  background-color: var(--red-light) !important;
}

.bg-red-lighter-on-hover:hover,
.bg-red-lighter-on-active.is-active,
.bg-red-lighter-on-active.is-active:hover {
  background-color: var(--red-lighter) !important;
}

.bg-red-faint-on-hover:hover,
.bg-red-faint-on-active.is-active,
.bg-red-faint-on-active.is-active:hover {
  background-color: var(--red-faint) !important;
}

.bg-orange-dark-on-hover:hover,
.bg-orange-dark-on-active.is-active,
.bg-orange-dark-on-active.is-active:hover {
  background-color: var(--orange-dark) !important;
}

.bg-orange-deep-on-hover:hover,
.bg-orange-deep-on-active.is-active,
.bg-orange-deep-on-active.is-active:hover {
  background-color: var(--orange-deep) !important;
}

.bg-orange-on-hover:hover,
.bg-orange-on-active.is-active,
.bg-orange-on-active.is-active:hover {
  background-color: var(--orange) !important;
}

.bg-orange-light-on-hover:hover,
.bg-orange-light-on-active.is-active,
.bg-orange-light-on-active.is-active:hover {
  background-color: var(--orange-light) !important;
}

.bg-orange-lighter-on-hover:hover,
.bg-orange-lighter-on-active.is-active,
.bg-orange-lighter-on-active.is-active:hover {
  background-color: var(--orange-lighter) !important;
}

.bg-orange-faint-on-hover:hover,
.bg-orange-faint-on-active.is-active,
.bg-orange-faint-on-active.is-active:hover {
  background-color: var(--orange-faint) !important;
}

.bg-yellow-dark-on-hover:hover,
.bg-yellow-dark-on-active.is-active,
.bg-yellow-dark-on-active.is-active:hover {
  background-color: var(--yellow-dark) !important;
}

.bg-yellow-deep-on-hover:hover,
.bg-yellow-deep-on-active.is-active,
.bg-yellow-deep-on-active.is-active:hover {
  background-color: var(--yellow-deep) !important;
}

.bg-yellow-on-hover:hover,
.bg-yellow-on-active.is-active,
.bg-yellow-on-active.is-active:hover {
  background-color: var(--yellow) !important;
}

.bg-yellow-light-on-hover:hover,
.bg-yellow-light-on-active.is-active,
.bg-yellow-light-on-active.is-active:hover {
  background-color: var(--yellow-light) !important;
}

.bg-yellow-lighter-on-hover:hover,
.bg-yellow-lighter-on-active.is-active,
.bg-yellow-lighter-on-active.is-active:hover {
  background-color: var(--yellow-lighter) !important;
}

.bg-yellow-faint-on-hover:hover,
.bg-yellow-faint-on-active.is-active,
.bg-yellow-faint-on-active.is-active:hover {
  background-color: var(--yellow-faint) !important;
}

.bg-green-dark-on-hover:hover,
.bg-green-dark-on-active.is-active,
.bg-green-dark-on-active.is-active:hover {
  background-color: var(--green-dark) !important;
}

.bg-green-deep-on-hover:hover,
.bg-green-deep-on-active.is-active,
.bg-green-deep-on-active.is-active:hover {
  background-color: var(--green-deep) !important;
}

.bg-green-on-hover:hover,
.bg-green-on-active.is-active,
.bg-green-on-active.is-active:hover {
  background-color: var(--green) !important;
}

.bg-green-light-on-hover:hover,
.bg-green-light-on-active.is-active,
.bg-green-light-on-active.is-active:hover {
  background-color: var(--green-light) !important;
}

.bg-green-lighter-on-hover:hover,
.bg-green-lighter-on-active.is-active,
.bg-green-lighter-on-active.is-active:hover {
  background-color: var(--green-lighter) !important;
}

.bg-green-faint-on-hover:hover,
.bg-green-faint-on-active.is-active,
.bg-green-faint-on-active.is-active:hover {
  background-color: var(--green-faint) !important;
}

.bg-blue-dark-on-hover:hover,
.bg-blue-dark-on-active.is-active,
.bg-blue-dark-on-active.is-active:hover {
  background-color: var(--blue-dark) !important;
}

.bg-blue-deep-on-hover:hover,
.bg-blue-deep-on-active.is-active,
.bg-blue-deep-on-active.is-active:hover {
  background-color: var(--blue-deep) !important;
}

.bg-blue-on-hover:hover,
.bg-blue-on-active.is-active,
.bg-blue-on-active.is-active:hover {
  background-color: var(--blue) !important;
}

.bg-blue-light-on-hover:hover,
.bg-blue-light-on-active.is-active,
.bg-blue-light-on-active.is-active:hover {
  background-color: var(--blue-light) !important;
}

.bg-blue-lighter-on-hover:hover,
.bg-blue-lighter-on-active.is-active,
.bg-blue-lighter-on-active.is-active:hover {
  background-color: var(--blue-lighter) !important;
}

.bg-blue-faint-on-hover:hover,
.bg-blue-faint-on-active.is-active,
.bg-blue-faint-on-active.is-active:hover {
  background-color: var(--blue-faint) !important;
}

.bg-purple-dark-on-hover:hover,
.bg-purple-dark-on-active.is-active,
.bg-purple-dark-on-active.is-active:hover {
  background-color: var(--purple-dark) !important;
}

.bg-purple-deep-on-hover:hover,
.bg-purple-deep-on-active.is-active,
.bg-purple-deep-on-active.is-active:hover {
  background-color: var(--purple-deep) !important;
}

.bg-purple-on-hover:hover,
.bg-purple-on-active.is-active,
.bg-purple-on-active.is-active:hover {
  background-color: var(--purple) !important;
}

.bg-purple-light-on-hover:hover,
.bg-purple-light-on-active.is-active,
.bg-purple-light-on-active.is-active:hover {
  background-color: var(--purple-light) !important;
}

.bg-purple-lighter-on-hover:hover,
.bg-purple-lighter-on-active.is-active,
.bg-purple-lighter-on-active.is-active:hover {
  background-color: var(--purple-lighter) !important;
}

.bg-purple-faint-on-hover:hover,
.bg-purple-faint-on-active.is-active,
.bg-purple-faint-on-active.is-active:hover {
  background-color: var(--purple-faint) !important;
}

.bg-darken5-on-hover:hover,
.bg-darken5-on-active.is-active,
.bg-darken5-on-active.is-active:hover {
  background-color: var(--darken5) !important;
}

.bg-darken10-on-hover:hover,
.bg-darken10-on-active.is-active,
.bg-darken10-on-active.is-active:hover {
  background-color: var(--darken10) !important;
}

.bg-darken25-on-hover:hover,
.bg-darken25-on-active.is-active,
.bg-darken25-on-active.is-active:hover {
  background-color: var(--darken25) !important;
}

.bg-darken50-on-hover:hover,
.bg-darken50-on-active.is-active,
.bg-darken50-on-active.is-active:hover {
  background-color: var(--darken50) !important;
}

.bg-darken75-on-hover:hover,
.bg-darken75-on-active.is-active,
.bg-darken75-on-active.is-active:hover {
  background-color: var(--darken75) !important;
}

.bg-lighten5-on-hover:hover,
.bg-lighten5-on-active.is-active,
.bg-lighten5-on-active.is-active:hover {
  background-color: var(--lighten5) !important;
}

.bg-lighten10-on-hover:hover,
.bg-lighten10-on-active.is-active,
.bg-lighten10-on-active.is-active:hover {
  background-color: var(--lighten10) !important;
}

.bg-lighten25-on-hover:hover,
.bg-lighten25-on-active.is-active,
.bg-lighten25-on-active.is-active:hover {
  background-color: var(--lighten25) !important;
}

.bg-lighten50-on-hover:hover,
.bg-lighten50-on-active.is-active,
.bg-lighten50-on-active.is-active:hover {
  background-color: var(--lighten50) !important;
}

.bg-lighten75-on-hover:hover,
.bg-lighten75-on-active.is-active,
.bg-lighten75-on-active.is-active:hover {
  background-color: var(--lighten75) !important;
}

.bg-white-on-hover:hover,
.bg-white-on-active.is-active,
.bg-white-on-active.is-active:hover {
  background-color: var(--white) !important;
}

.bg-black-on-hover:hover,
.bg-black-on-active.is-active,
.bg-black-on-active.is-active:hover {
  background-color: var(--black) !important;
}

.bg-transparent-on-hover:hover,
.bg-transparent-on-active.is-active,
.bg-transparent-on-active.is-active:hover {
  background-color: var(--transparent) !important;
}

/** @endgroup */

/**
 * Apply a text color on hover and active states.
 *
 * @group
 * @memberof Text colors
 * @example
 * <div class='color-red-on-hover'>color-red-on-hover</div>
 * <div class='color-red-on-active'>color-red-on-active (not active)</div>
 * <div class='color-red-on-active is-active'>color-red-on-active (active)</div>
 */
.color-gray-dark-on-hover:hover,
.color-gray-dark-on-active.is-active,
.color-gray-dark-on-active.is-active:hover {
  color: var(--gray-dark) !important;
}

.color-gray-deep-on-hover:hover,
.color-gray-deep-on-active.is-active,
.color-gray-deep-on-active.is-active:hover {
  color: var(--gray-deep) !important;
}

.color-gray-on-hover:hover,
.color-gray-on-active.is-active,
.color-gray-on-active.is-active:hover {
  color: var(--gray) !important;
}

.color-gray-light-on-hover:hover,
.color-gray-light-on-active.is-active,
.color-gray-light-on-active.is-active:hover {
  color: var(--gray-light) !important;
}

.color-gray-lighter-on-hover:hover,
.color-gray-lighter-on-active.is-active,
.color-gray-lighter-on-active.is-active:hover {
  color: var(--gray-lighter) !important;
}

.color-gray-faint-on-hover:hover,
.color-gray-faint-on-active.is-active,
.color-gray-faint-on-active.is-active:hover {
  color: var(--gray-faint) !important;
}

.color-pink-dark-on-hover:hover,
.color-pink-dark-on-active.is-active,
.color-pink-dark-on-active.is-active:hover {
  color: var(--pink-dark) !important;
}

.color-pink-deep-on-hover:hover,
.color-pink-deep-on-active.is-active,
.color-pink-deep-on-active.is-active:hover {
  color: var(--pink-deep) !important;
}

.color-pink-on-hover:hover,
.color-pink-on-active.is-active,
.color-pink-on-active.is-active:hover {
  color: var(--pink) !important;
}

.color-pink-light-on-hover:hover,
.color-pink-light-on-active.is-active,
.color-pink-light-on-active.is-active:hover {
  color: var(--pink-light) !important;
}

.color-pink-lighter-on-hover:hover,
.color-pink-lighter-on-active.is-active,
.color-pink-lighter-on-active.is-active:hover {
  color: var(--pink-lighter) !important;
}

.color-pink-faint-on-hover:hover,
.color-pink-faint-on-active.is-active,
.color-pink-faint-on-active.is-active:hover {
  color: var(--pink-faint) !important;
}

.color-red-dark-on-hover:hover,
.color-red-dark-on-active.is-active,
.color-red-dark-on-active.is-active:hover {
  color: var(--red-dark) !important;
}

.color-red-deep-on-hover:hover,
.color-red-deep-on-active.is-active,
.color-red-deep-on-active.is-active:hover {
  color: var(--red-deep) !important;
}

.color-red-on-hover:hover,
.color-red-on-active.is-active,
.color-red-on-active.is-active:hover {
  color: var(--red) !important;
}

.color-red-light-on-hover:hover,
.color-red-light-on-active.is-active,
.color-red-light-on-active.is-active:hover {
  color: var(--red-light) !important;
}

.color-red-lighter-on-hover:hover,
.color-red-lighter-on-active.is-active,
.color-red-lighter-on-active.is-active:hover {
  color: var(--red-lighter) !important;
}

.color-red-faint-on-hover:hover,
.color-red-faint-on-active.is-active,
.color-red-faint-on-active.is-active:hover {
  color: var(--red-faint) !important;
}

.color-orange-dark-on-hover:hover,
.color-orange-dark-on-active.is-active,
.color-orange-dark-on-active.is-active:hover {
  color: var(--orange-dark) !important;
}

.color-orange-deep-on-hover:hover,
.color-orange-deep-on-active.is-active,
.color-orange-deep-on-active.is-active:hover {
  color: var(--orange-deep) !important;
}

.color-orange-on-hover:hover,
.color-orange-on-active.is-active,
.color-orange-on-active.is-active:hover {
  color: var(--orange) !important;
}

.color-orange-light-on-hover:hover,
.color-orange-light-on-active.is-active,
.color-orange-light-on-active.is-active:hover {
  color: var(--orange-light) !important;
}

.color-orange-lighter-on-hover:hover,
.color-orange-lighter-on-active.is-active,
.color-orange-lighter-on-active.is-active:hover {
  color: var(--orange-lighter) !important;
}

.color-orange-faint-on-hover:hover,
.color-orange-faint-on-active.is-active,
.color-orange-faint-on-active.is-active:hover {
  color: var(--orange-faint) !important;
}

.color-yellow-dark-on-hover:hover,
.color-yellow-dark-on-active.is-active,
.color-yellow-dark-on-active.is-active:hover {
  color: var(--yellow-dark) !important;
}

.color-yellow-deep-on-hover:hover,
.color-yellow-deep-on-active.is-active,
.color-yellow-deep-on-active.is-active:hover {
  color: var(--yellow-deep) !important;
}

.color-yellow-on-hover:hover,
.color-yellow-on-active.is-active,
.color-yellow-on-active.is-active:hover {
  color: var(--yellow) !important;
}

.color-yellow-light-on-hover:hover,
.color-yellow-light-on-active.is-active,
.color-yellow-light-on-active.is-active:hover {
  color: var(--yellow-light) !important;
}

.color-yellow-lighter-on-hover:hover,
.color-yellow-lighter-on-active.is-active,
.color-yellow-lighter-on-active.is-active:hover {
  color: var(--yellow-lighter) !important;
}

.color-yellow-faint-on-hover:hover,
.color-yellow-faint-on-active.is-active,
.color-yellow-faint-on-active.is-active:hover {
  color: var(--yellow-faint) !important;
}

.color-green-dark-on-hover:hover,
.color-green-dark-on-active.is-active,
.color-green-dark-on-active.is-active:hover {
  color: var(--green-dark) !important;
}

.color-green-deep-on-hover:hover,
.color-green-deep-on-active.is-active,
.color-green-deep-on-active.is-active:hover {
  color: var(--green-deep) !important;
}

.color-green-on-hover:hover,
.color-green-on-active.is-active,
.color-green-on-active.is-active:hover {
  color: var(--green) !important;
}

.color-green-light-on-hover:hover,
.color-green-light-on-active.is-active,
.color-green-light-on-active.is-active:hover {
  color: var(--green-light) !important;
}

.color-green-lighter-on-hover:hover,
.color-green-lighter-on-active.is-active,
.color-green-lighter-on-active.is-active:hover {
  color: var(--green-lighter) !important;
}

.color-green-faint-on-hover:hover,
.color-green-faint-on-active.is-active,
.color-green-faint-on-active.is-active:hover {
  color: var(--green-faint) !important;
}

.color-blue-dark-on-hover:hover,
.color-blue-dark-on-active.is-active,
.color-blue-dark-on-active.is-active:hover {
  color: var(--blue-dark) !important;
}

.color-blue-deep-on-hover:hover,
.color-blue-deep-on-active.is-active,
.color-blue-deep-on-active.is-active:hover {
  color: var(--blue-deep) !important;
}

.color-blue-on-hover:hover,
.color-blue-on-active.is-active,
.color-blue-on-active.is-active:hover {
  color: var(--blue) !important;
}

.color-blue-light-on-hover:hover,
.color-blue-light-on-active.is-active,
.color-blue-light-on-active.is-active:hover {
  color: var(--blue-light) !important;
}

.color-blue-lighter-on-hover:hover,
.color-blue-lighter-on-active.is-active,
.color-blue-lighter-on-active.is-active:hover {
  color: var(--blue-lighter) !important;
}

.color-blue-faint-on-hover:hover,
.color-blue-faint-on-active.is-active,
.color-blue-faint-on-active.is-active:hover {
  color: var(--blue-faint) !important;
}

.color-purple-dark-on-hover:hover,
.color-purple-dark-on-active.is-active,
.color-purple-dark-on-active.is-active:hover {
  color: var(--purple-dark) !important;
}

.color-purple-deep-on-hover:hover,
.color-purple-deep-on-active.is-active,
.color-purple-deep-on-active.is-active:hover {
  color: var(--purple-deep) !important;
}

.color-purple-on-hover:hover,
.color-purple-on-active.is-active,
.color-purple-on-active.is-active:hover {
  color: var(--purple) !important;
}

.color-purple-light-on-hover:hover,
.color-purple-light-on-active.is-active,
.color-purple-light-on-active.is-active:hover {
  color: var(--purple-light) !important;
}

.color-purple-lighter-on-hover:hover,
.color-purple-lighter-on-active.is-active,
.color-purple-lighter-on-active.is-active:hover {
  color: var(--purple-lighter) !important;
}

.color-purple-faint-on-hover:hover,
.color-purple-faint-on-active.is-active,
.color-purple-faint-on-active.is-active:hover {
  color: var(--purple-faint) !important;
}

.color-darken10-on-hover:hover,
.color-darken10-on-active.is-active,
.color-darken10-on-active.is-active:hover {
  color: var(--darken10) !important;
}

.color-darken25-on-hover:hover,
.color-darken25-on-active.is-active,
.color-darken25-on-active.is-active:hover {
  color: var(--darken25) !important;
}

.color-darken50-on-hover:hover,
.color-darken50-on-active.is-active,
.color-darken50-on-active.is-active:hover {
  color: var(--darken50) !important;
}

.color-darken75-on-hover:hover,
.color-darken75-on-active.is-active,
.color-darken75-on-active.is-active:hover {
  color: var(--darken75) !important;
}

.color-lighten10-on-hover:hover,
.color-lighten10-on-active.is-active,
.color-lighten10-on-active.is-active:hover {
  color: var(--lighten10) !important;
}

.color-lighten25-on-hover:hover,
.color-lighten25-on-active.is-active,
.color-lighten25-on-active.is-active:hover {
  color: var(--lighten25) !important;
}

.color-lighten50-on-hover:hover,
.color-lighten50-on-active.is-active,
.color-lighten50-on-active.is-active:hover {
  color: var(--lighten50) !important;
}

.color-lighten75-on-hover:hover,
.color-lighten75-on-active.is-active,
.color-lighten75-on-active.is-active:hover {
  color: var(--lighten75) !important;
}

.color-white-on-hover:hover,
.color-white-on-active.is-active,
.color-white-on-active.is-active:hover {
  color: var(--white) !important;
}

.color-black-on-hover:hover,
.color-black-on-active.is-active,
.color-black-on-active.is-active:hover {
  color: var(--black) !important;
}

.color-transparent-on-hover:hover,
.color-transparent-on-active.is-active,
.color-transparent-on-active.is-active:hover {
  color: var(--transparent) !important;
}

/** @endgroup */

/**
 * Apply a border color on hover and active states.
 *
 * @group
 * @memberof Borders
 * @example
 * <div class='border border--red-on-hover'>border--red-on-hover</div>
 * <div class='border border--red-on-active'>border--red-on-active (not active)</div>
 * <div class='border border--red-on-active is-active'>border--red-on-active (active)</div>
 */
.border--gray-dark-on-hover:hover,
.border--gray-dark-on-active.is-active,
.border--gray-dark-on-active.is-active:hover {
  border-color: var(--gray-dark) !important;
}

.border--gray-deep-on-hover:hover,
.border--gray-deep-on-active.is-active,
.border--gray-deep-on-active.is-active:hover {
  border-color: var(--gray-deep) !important;
}

.border--gray-on-hover:hover,
.border--gray-on-active.is-active,
.border--gray-on-active.is-active:hover {
  border-color: var(--gray) !important;
}

.border--gray-light-on-hover:hover,
.border--gray-light-on-active.is-active,
.border--gray-light-on-active.is-active:hover {
  border-color: var(--gray-light) !important;
}

.border--gray-lighter-on-hover:hover,
.border--gray-lighter-on-active.is-active,
.border--gray-lighter-on-active.is-active:hover {
  border-color: var(--gray-lighter) !important;
}

.border--gray-faint-on-hover:hover,
.border--gray-faint-on-active.is-active,
.border--gray-faint-on-active.is-active:hover {
  border-color: var(--gray-faint) !important;
}

.border--pink-dark-on-hover:hover,
.border--pink-dark-on-active.is-active,
.border--pink-dark-on-active.is-active:hover {
  border-color: var(--pink-dark) !important;
}

.border--pink-deep-on-hover:hover,
.border--pink-deep-on-active.is-active,
.border--pink-deep-on-active.is-active:hover {
  border-color: var(--pink-deep) !important;
}

.border--pink-on-hover:hover,
.border--pink-on-active.is-active,
.border--pink-on-active.is-active:hover {
  border-color: var(--pink) !important;
}

.border--pink-light-on-hover:hover,
.border--pink-light-on-active.is-active,
.border--pink-light-on-active.is-active:hover {
  border-color: var(--pink-light) !important;
}

.border--pink-lighter-on-hover:hover,
.border--pink-lighter-on-active.is-active,
.border--pink-lighter-on-active.is-active:hover {
  border-color: var(--pink-lighter) !important;
}

.border--pink-faint-on-hover:hover,
.border--pink-faint-on-active.is-active,
.border--pink-faint-on-active.is-active:hover {
  border-color: var(--pink-faint) !important;
}

.border--red-dark-on-hover:hover,
.border--red-dark-on-active.is-active,
.border--red-dark-on-active.is-active:hover {
  border-color: var(--red-dark) !important;
}

.border--red-deep-on-hover:hover,
.border--red-deep-on-active.is-active,
.border--red-deep-on-active.is-active:hover {
  border-color: var(--red-deep) !important;
}

.border--red-on-hover:hover,
.border--red-on-active.is-active,
.border--red-on-active.is-active:hover {
  border-color: var(--red) !important;
}

.border--red-light-on-hover:hover,
.border--red-light-on-active.is-active,
.border--red-light-on-active.is-active:hover {
  border-color: var(--red-light) !important;
}

.border--red-lighter-on-hover:hover,
.border--red-lighter-on-active.is-active,
.border--red-lighter-on-active.is-active:hover {
  border-color: var(--red-lighter) !important;
}

.border--red-faint-on-hover:hover,
.border--red-faint-on-active.is-active,
.border--red-faint-on-active.is-active:hover {
  border-color: var(--red-faint) !important;
}

.border--orange-dark-on-hover:hover,
.border--orange-dark-on-active.is-active,
.border--orange-dark-on-active.is-active:hover {
  border-color: var(--orange-dark) !important;
}

.border--orange-deep-on-hover:hover,
.border--orange-deep-on-active.is-active,
.border--orange-deep-on-active.is-active:hover {
  border-color: var(--orange-deep) !important;
}

.border--orange-on-hover:hover,
.border--orange-on-active.is-active,
.border--orange-on-active.is-active:hover {
  border-color: var(--orange) !important;
}

.border--orange-light-on-hover:hover,
.border--orange-light-on-active.is-active,
.border--orange-light-on-active.is-active:hover {
  border-color: var(--orange-light) !important;
}

.border--orange-lighter-on-hover:hover,
.border--orange-lighter-on-active.is-active,
.border--orange-lighter-on-active.is-active:hover {
  border-color: var(--orange-lighter) !important;
}

.border--orange-faint-on-hover:hover,
.border--orange-faint-on-active.is-active,
.border--orange-faint-on-active.is-active:hover {
  border-color: var(--orange-faint) !important;
}

.border--yellow-dark-on-hover:hover,
.border--yellow-dark-on-active.is-active,
.border--yellow-dark-on-active.is-active:hover {
  border-color: var(--yellow-dark) !important;
}

.border--yellow-deep-on-hover:hover,
.border--yellow-deep-on-active.is-active,
.border--yellow-deep-on-active.is-active:hover {
  border-color: var(--yellow-deep) !important;
}

.border--yellow-on-hover:hover,
.border--yellow-on-active.is-active,
.border--yellow-on-active.is-active:hover {
  border-color: var(--yellow) !important;
}

.border--yellow-light-on-hover:hover,
.border--yellow-light-on-active.is-active,
.border--yellow-light-on-active.is-active:hover {
  border-color: var(--yellow-light) !important;
}

.border--yellow-lighter-on-hover:hover,
.border--yellow-lighter-on-active.is-active,
.border--yellow-lighter-on-active.is-active:hover {
  border-color: var(--yellow-lighter) !important;
}

.border--yellow-faint-on-hover:hover,
.border--yellow-faint-on-active.is-active,
.border--yellow-faint-on-active.is-active:hover {
  border-color: var(--yellow-faint) !important;
}

.border--green-dark-on-hover:hover,
.border--green-dark-on-active.is-active,
.border--green-dark-on-active.is-active:hover {
  border-color: var(--green-dark) !important;
}

.border--green-deep-on-hover:hover,
.border--green-deep-on-active.is-active,
.border--green-deep-on-active.is-active:hover {
  border-color: var(--green-deep) !important;
}

.border--green-on-hover:hover,
.border--green-on-active.is-active,
.border--green-on-active.is-active:hover {
  border-color: var(--green) !important;
}

.border--green-light-on-hover:hover,
.border--green-light-on-active.is-active,
.border--green-light-on-active.is-active:hover {
  border-color: var(--green-light) !important;
}

.border--green-lighter-on-hover:hover,
.border--green-lighter-on-active.is-active,
.border--green-lighter-on-active.is-active:hover {
  border-color: var(--green-lighter) !important;
}

.border--green-faint-on-hover:hover,
.border--green-faint-on-active.is-active,
.border--green-faint-on-active.is-active:hover {
  border-color: var(--green-faint) !important;
}

.border--blue-dark-on-hover:hover,
.border--blue-dark-on-active.is-active,
.border--blue-dark-on-active.is-active:hover {
  border-color: var(--blue-dark) !important;
}

.border--blue-deep-on-hover:hover,
.border--blue-deep-on-active.is-active,
.border--blue-deep-on-active.is-active:hover {
  border-color: var(--blue-deep) !important;
}

.border--blue-on-hover:hover,
.border--blue-on-active.is-active,
.border--blue-on-active.is-active:hover {
  border-color: var(--blue) !important;
}

.border--blue-light-on-hover:hover,
.border--blue-light-on-active.is-active,
.border--blue-light-on-active.is-active:hover {
  border-color: var(--blue-light) !important;
}

.border--blue-lighter-on-hover:hover,
.border--blue-lighter-on-active.is-active,
.border--blue-lighter-on-active.is-active:hover {
  border-color: var(--blue-lighter) !important;
}

.border--blue-faint-on-hover:hover,
.border--blue-faint-on-active.is-active,
.border--blue-faint-on-active.is-active:hover {
  border-color: var(--blue-faint) !important;
}

.border--purple-dark-on-hover:hover,
.border--purple-dark-on-active.is-active,
.border--purple-dark-on-active.is-active:hover {
  border-color: var(--purple-dark) !important;
}

.border--purple-deep-on-hover:hover,
.border--purple-deep-on-active.is-active,
.border--purple-deep-on-active.is-active:hover {
  border-color: var(--purple-deep) !important;
}

.border--purple-on-hover:hover,
.border--purple-on-active.is-active,
.border--purple-on-active.is-active:hover {
  border-color: var(--purple) !important;
}

.border--purple-light-on-hover:hover,
.border--purple-light-on-active.is-active,
.border--purple-light-on-active.is-active:hover {
  border-color: var(--purple-light) !important;
}

.border--purple-lighter-on-hover:hover,
.border--purple-lighter-on-active.is-active,
.border--purple-lighter-on-active.is-active:hover {
  border-color: var(--purple-lighter) !important;
}

.border--purple-faint-on-hover:hover,
.border--purple-faint-on-active.is-active,
.border--purple-faint-on-active.is-active:hover {
  border-color: var(--purple-faint) !important;
}

.border--darken10-on-hover:hover,
.border--darken10-on-active.is-active,
.border--darken10-on-active.is-active:hover {
  border-color: var(--darken10) !important;
}

.border--darken25-on-hover:hover,
.border--darken25-on-active.is-active,
.border--darken25-on-active.is-active:hover {
  border-color: var(--darken25) !important;
}

.border--darken50-on-hover:hover,
.border--darken50-on-active.is-active,
.border--darken50-on-active.is-active:hover {
  border-color: var(--darken50) !important;
}

.border--darken75-on-hover:hover,
.border--darken75-on-active.is-active,
.border--darken75-on-active.is-active:hover {
  border-color: var(--darken75) !important;
}

.border--lighten10-on-hover:hover,
.border--lighten10-on-active.is-active,
.border--lighten10-on-active.is-active:hover {
  border-color: var(--lighten10) !important;
}

.border--lighten25-on-hover:hover,
.border--lighten25-on-active.is-active,
.border--lighten25-on-active.is-active:hover {
  border-color: var(--lighten25) !important;
}

.border--lighten50-on-hover:hover,
.border--lighten50-on-active.is-active,
.border--lighten50-on-active.is-active:hover {
  border-color: var(--lighten50) !important;
}

.border--lighten75-on-hover:hover,
.border--lighten75-on-active.is-active,
.border--lighten75-on-active.is-active:hover {
  border-color: var(--lighten75) !important;
}

.border--white-on-hover:hover,
.border--white-on-active.is-active,
.border--white-on-active.is-active:hover {
  border-color: var(--white) !important;
}

.border--black-on-hover:hover,
.border--black-on-active.is-active,
.border--black-on-active.is-active:hover {
  border-color: var(--black) !important;
}

.border--transparent-on-hover:hover,
.border--transparent-on-active.is-active,
.border--transparent-on-active.is-active:hover {
  border-color: var(--transparent) !important;
}

/** @endgroup */