@charset "UTF-8";
/* --- _INTERACTIONS.CSS OF MOEFRAME
	Creator: Moritz Müller | MadeOfEffort
	https://madeofeffort.de
	Version: 1.0

	Copyright OpenJS Foundation and other contributors
	Released under the MIT license
	https://madeofeffort.de/license
	Date: 2021-05-01
	Time: 01:01:01
--- */
/* --- BUTTONS / INPUTS / TEXTAREA / CHECKBOX SIZES AND COLORS --- */
/*  --- BUTTONS ---  */
button, .button, input[type=button], input[type=color], input[type=date], input[type=datetime-local], input[type=month], input[type=reset], input[type=submit], input[type=time], input[type=week] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  display: inline-block;
  width: auto;
  height: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: var(--distance-075) var(--distance-25);
  background-image: -moz-linear-gradient(45deg, var(--color-greyscale-7) 20%, var(--color-greyscale-8) 50%, var(--color-greyscale-9) 80%);
  background-image: -webkit-linear-gradient(45deg, var(--color-greyscale-7) 20%, var(--color-greyscale-8) 50%, var(--color-greyscale-9) 80%);
  background-image: linear-gradient(45deg, var(--color-greyscale-7) 20%, var(--color-greyscale-8) 50%, var(--color-greyscale-9) 80%);
  background-size: 200% 110%;
  background-position: 90% 50%;
  background-repeat: no-repeat;
  border-radius: var(--border-radius);
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: transparent;
  outline: none;
  font-size: var(--font-size-s);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-s);
  text-align: center;
  text-decoration: none;
  text-transform: var(--control-text-transform);
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: var(--control-transition);
  -moz-transition: var(--control-transition);
  -ms-transition: var(--control-transition);
  -o-transition: var(--control-transition);
  transition: var(--control-transition);
  --primary-icon-color: currentColor;
  --secondary-icon-color: currentColor;
}
button:hover, button:focus, button:active, button:visited, .button:hover, .button:focus, .button:active, .button:visited, input[type=button]:hover, input[type=button]:focus, input[type=button]:active, input[type=button]:visited, input[type=color]:hover, input[type=color]:focus, input[type=color]:active, input[type=color]:visited, input[type=date]:hover, input[type=date]:focus, input[type=date]:active, input[type=date]:visited, input[type=datetime-local]:hover, input[type=datetime-local]:focus, input[type=datetime-local]:active, input[type=datetime-local]:visited, input[type=month]:hover, input[type=month]:focus, input[type=month]:active, input[type=month]:visited, input[type=reset]:hover, input[type=reset]:focus, input[type=reset]:active, input[type=reset]:visited, input[type=submit]:hover, input[type=submit]:focus, input[type=submit]:active, input[type=submit]:visited, input[type=time]:hover, input[type=time]:focus, input[type=time]:active, input[type=time]:visited, input[type=week]:hover, input[type=week]:focus, input[type=week]:active, input[type=week]:visited {
  --primary-icon-color: currentColor;
  --secondary-icon-color: currentColor;
  background-position: 10% 50%;
  border-color: transparent;
}
button.small, .button.small, input[type=button].small, input[type=color].small, input[type=date].small, input[type=datetime-local].small, input[type=month].small, input[type=reset].small, input[type=submit].small, input[type=time].small, input[type=week].small {
  font-size: var(--font-size-xs);
  padding: var(--distance-05) var(--distance-15);
}
button.large, .button.large, input[type=button].large, input[type=color].large, input[type=date].large, input[type=datetime-local].large, input[type=month].large, input[type=reset].large, input[type=submit].large, input[type=time].large, input[type=week].large {
  font-size: var(--font-size-m);
  padding: var(--distance-075) var(--distance-25);
}
button.centered, .button.centered, input[type=button].centered, input[type=color].centered, input[type=date].centered, input[type=datetime-local].centered, input[type=month].centered, input[type=reset].centered, input[type=submit].centered, input[type=time].centered, input[type=week].centered {
  display: block;
  float: none;
  margin-right: auto;
  margin-left: auto;
}
button.primary, .button.primary, input[type=button].primary, input[type=color].primary, input[type=date].primary, input[type=datetime-local].primary, input[type=month].primary, input[type=reset].primary, input[type=submit].primary, input[type=time].primary, input[type=week].primary {
  color: var(--color-true-white);
  background-color: var(--color-primary-5);
  background-image: -moz-linear-gradient(45deg, var(--color-primary-3) 20%, var(--color-primary-4) 50%, var(--color-primary-5) 80%);
  background-image: -webkit-linear-gradient(45deg, var(--color-primary-3) 20%, var(--color-primary-4) 50%, var(--color-primary-5) 80%);
  background-image: linear-gradient(45deg, var(--color-primary-3) 20%, var(--color-primary-4) 50%, var(--color-primary-5) 80%);
}
button.primary:hover, button.primary:focus, button.primary:active, button.primary:visited, .button.primary:hover, .button.primary:focus, .button.primary:active, .button.primary:visited, input[type=button].primary:hover, input[type=button].primary:focus, input[type=button].primary:active, input[type=button].primary:visited, input[type=color].primary:hover, input[type=color].primary:focus, input[type=color].primary:active, input[type=color].primary:visited, input[type=date].primary:hover, input[type=date].primary:focus, input[type=date].primary:active, input[type=date].primary:visited, input[type=datetime-local].primary:hover, input[type=datetime-local].primary:focus, input[type=datetime-local].primary:active, input[type=datetime-local].primary:visited, input[type=month].primary:hover, input[type=month].primary:focus, input[type=month].primary:active, input[type=month].primary:visited, input[type=reset].primary:hover, input[type=reset].primary:focus, input[type=reset].primary:active, input[type=reset].primary:visited, input[type=submit].primary:hover, input[type=submit].primary:focus, input[type=submit].primary:active, input[type=submit].primary:visited, input[type=time].primary:hover, input[type=time].primary:focus, input[type=time].primary:active, input[type=time].primary:visited, input[type=week].primary:hover, input[type=week].primary:focus, input[type=week].primary:active, input[type=week].primary:visited {
  color: var(--color-true-white);
  background-color: var(--color-primary-3);
}
button.secondary, .button.secondary, input[type=button].secondary, input[type=color].secondary, input[type=date].secondary, input[type=datetime-local].secondary, input[type=month].secondary, input[type=reset].secondary, input[type=submit].secondary, input[type=time].secondary, input[type=week].secondary {
  color: var(--color-true-white);
  background-color: var(--color-secondary-5);
  background-image: -moz-linear-gradient(45deg, var(--color-secondary-3) 20%, var(--color-secondary-4) 50%, var(--color-secondary-5) 80%);
  background-image: -webkit-linear-gradient(45deg, var(--color-secondary-3) 20%, var(--color-secondary-4) 50%, var(--color-secondary-5) 80%);
  background-image: linear-gradient(45deg, var(--color-secondary-3) 20%, var(--color-secondary-4) 50%, var(--color-secondary-5) 80%);
  border-color: transparent;
}
button.secondary:hover, button.secondary:focus, button.secondary:active, button.secondary:visited, .button.secondary:hover, .button.secondary:focus, .button.secondary:active, .button.secondary:visited, input[type=button].secondary:hover, input[type=button].secondary:focus, input[type=button].secondary:active, input[type=button].secondary:visited, input[type=color].secondary:hover, input[type=color].secondary:focus, input[type=color].secondary:active, input[type=color].secondary:visited, input[type=date].secondary:hover, input[type=date].secondary:focus, input[type=date].secondary:active, input[type=date].secondary:visited, input[type=datetime-local].secondary:hover, input[type=datetime-local].secondary:focus, input[type=datetime-local].secondary:active, input[type=datetime-local].secondary:visited, input[type=month].secondary:hover, input[type=month].secondary:focus, input[type=month].secondary:active, input[type=month].secondary:visited, input[type=reset].secondary:hover, input[type=reset].secondary:focus, input[type=reset].secondary:active, input[type=reset].secondary:visited, input[type=submit].secondary:hover, input[type=submit].secondary:focus, input[type=submit].secondary:active, input[type=submit].secondary:visited, input[type=time].secondary:hover, input[type=time].secondary:focus, input[type=time].secondary:active, input[type=time].secondary:visited, input[type=week].secondary:hover, input[type=week].secondary:focus, input[type=week].secondary:active, input[type=week].secondary:visited {
  color: var(--color-true-white);
  background-color: var(--color-secondary-3);
  border-color: transparent;
}
button.white, .button.white, input[type=button].white, input[type=color].white, input[type=date].white, input[type=datetime-local].white, input[type=month].white, input[type=reset].white, input[type=submit].white, input[type=time].white, input[type=week].white {
  color: var(--color-greyscale-0);
  background-color: var(--color-greyscale-9);
  background-image: -moz-linear-gradient(45deg, var(--color-greyscale-7) 20%, var(--color-greyscale-8) 50%, var(--color-greyscale-9) 80%);
  background-image: -webkit-linear-gradient(45deg, var(--color-greyscale-7) 20%, var(--color-greyscale-8) 50%, var(--color-greyscale-9) 80%);
  background-image: linear-gradient(45deg, var(--color-greyscale-7) 20%, var(--color-greyscale-8) 50%, var(--color-greyscale-9) 80%);
  border-color: transparent;
}
button.white:hover, button.white:focus, button.white:active, button.white:visited, .button.white:hover, .button.white:focus, .button.white:active, .button.white:visited, input[type=button].white:hover, input[type=button].white:focus, input[type=button].white:active, input[type=button].white:visited, input[type=color].white:hover, input[type=color].white:focus, input[type=color].white:active, input[type=color].white:visited, input[type=date].white:hover, input[type=date].white:focus, input[type=date].white:active, input[type=date].white:visited, input[type=datetime-local].white:hover, input[type=datetime-local].white:focus, input[type=datetime-local].white:active, input[type=datetime-local].white:visited, input[type=month].white:hover, input[type=month].white:focus, input[type=month].white:active, input[type=month].white:visited, input[type=reset].white:hover, input[type=reset].white:focus, input[type=reset].white:active, input[type=reset].white:visited, input[type=submit].white:hover, input[type=submit].white:focus, input[type=submit].white:active, input[type=submit].white:visited, input[type=time].white:hover, input[type=time].white:focus, input[type=time].white:active, input[type=time].white:visited, input[type=week].white:hover, input[type=week].white:focus, input[type=week].white:active, input[type=week].white:visited {
  color: var(--color-greyscale-0);
  background-color: var(--color-greyscale-9);
  border-color: transparent;
}
button.grey, .button.grey, input[type=button].grey, input[type=color].grey, input[type=date].grey, input[type=datetime-local].grey, input[type=month].grey, input[type=reset].grey, input[type=submit].grey, input[type=time].grey, input[type=week].grey {
  color: var(--color-greyscale-10);
  background-color: var(--color-greyscale-5);
  background-image: -moz-linear-gradient(45deg, var(--color-greyscale-4) 20%, var(--color-greyscale-5) 50%, var(--color-greyscale-6) 80%);
  background-image: -webkit-linear-gradient(45deg, var(--color-greyscale-4) 20%, var(--color-greyscale-5) 50%, var(--color-greyscale-6) 80%);
  background-image: linear-gradient(45deg, var(--color-greyscale-4) 20%, var(--color-greyscale-5) 50%, var(--color-greyscale-6) 80%);
  border-color: transparent;
}
button.grey:hover, button.grey:focus, button.grey:active, button.grey:visited, .button.grey:hover, .button.grey:focus, .button.grey:active, .button.grey:visited, input[type=button].grey:hover, input[type=button].grey:focus, input[type=button].grey:active, input[type=button].grey:visited, input[type=color].grey:hover, input[type=color].grey:focus, input[type=color].grey:active, input[type=color].grey:visited, input[type=date].grey:hover, input[type=date].grey:focus, input[type=date].grey:active, input[type=date].grey:visited, input[type=datetime-local].grey:hover, input[type=datetime-local].grey:focus, input[type=datetime-local].grey:active, input[type=datetime-local].grey:visited, input[type=month].grey:hover, input[type=month].grey:focus, input[type=month].grey:active, input[type=month].grey:visited, input[type=reset].grey:hover, input[type=reset].grey:focus, input[type=reset].grey:active, input[type=reset].grey:visited, input[type=submit].grey:hover, input[type=submit].grey:focus, input[type=submit].grey:active, input[type=submit].grey:visited, input[type=time].grey:hover, input[type=time].grey:focus, input[type=time].grey:active, input[type=time].grey:visited, input[type=week].grey:hover, input[type=week].grey:focus, input[type=week].grey:active, input[type=week].grey:visited {
  color: var(--color-greyscale-10);
  background-color: var(--color-greyscale-4);
  border-color: transparent;
}
button.black, .button.black, input[type=button].black, input[type=color].black, input[type=date].black, input[type=datetime-local].black, input[type=month].black, input[type=reset].black, input[type=submit].black, input[type=time].black, input[type=week].black {
  color: var(--color-greyscale-10);
  background-color: var(--color-greyscale-0);
  background-image: -moz-linear-gradient(45deg, var(--color-greyscale-1) 20%, var(--color-greyscale-2) 50%, var(--color-greyscale-3) 80%);
  background-image: -webkit-linear-gradient(45deg, var(--color-greyscale-1) 20%, var(--color-greyscale-2) 50%, var(--color-greyscale-3) 80%);
  background-image: linear-gradient(45deg, var(--color-greyscale-1) 20%, var(--color-greyscale-2) 50%, var(--color-greyscale-3) 80%);
  border-color: transparent;
}
button.black:hover, button.black:focus, button.black:active, button.black:visited, .button.black:hover, .button.black:focus, .button.black:active, .button.black:visited, input[type=button].black:hover, input[type=button].black:focus, input[type=button].black:active, input[type=button].black:visited, input[type=color].black:hover, input[type=color].black:focus, input[type=color].black:active, input[type=color].black:visited, input[type=date].black:hover, input[type=date].black:focus, input[type=date].black:active, input[type=date].black:visited, input[type=datetime-local].black:hover, input[type=datetime-local].black:focus, input[type=datetime-local].black:active, input[type=datetime-local].black:visited, input[type=month].black:hover, input[type=month].black:focus, input[type=month].black:active, input[type=month].black:visited, input[type=reset].black:hover, input[type=reset].black:focus, input[type=reset].black:active, input[type=reset].black:visited, input[type=submit].black:hover, input[type=submit].black:focus, input[type=submit].black:active, input[type=submit].black:visited, input[type=time].black:hover, input[type=time].black:focus, input[type=time].black:active, input[type=time].black:visited, input[type=week].black:hover, input[type=week].black:focus, input[type=week].black:active, input[type=week].black:visited {
  color: var(--color-greyscale-10);
  background-color: var(--color-greyscale-2);
  border-color: transparent;
}
button.lgbtqia, .button.lgbtqia, input[type=button].lgbtqia, input[type=color].lgbtqia, input[type=date].lgbtqia, input[type=datetime-local].lgbtqia, input[type=month].lgbtqia, input[type=reset].lgbtqia, input[type=submit].lgbtqia, input[type=time].lgbtqia, input[type=week].lgbtqia {
  color: var(--color-true-white);
  background-image: var(--color-lgbtqia-5);
  border-color: transparent;
}
button.lgbtqia:hover, button.lgbtqia:focus, button.lgbtqia:active, button.lgbtqia:visited, .button.lgbtqia:hover, .button.lgbtqia:focus, .button.lgbtqia:active, .button.lgbtqia:visited, input[type=button].lgbtqia:hover, input[type=button].lgbtqia:focus, input[type=button].lgbtqia:active, input[type=button].lgbtqia:visited, input[type=color].lgbtqia:hover, input[type=color].lgbtqia:focus, input[type=color].lgbtqia:active, input[type=color].lgbtqia:visited, input[type=date].lgbtqia:hover, input[type=date].lgbtqia:focus, input[type=date].lgbtqia:active, input[type=date].lgbtqia:visited, input[type=datetime-local].lgbtqia:hover, input[type=datetime-local].lgbtqia:focus, input[type=datetime-local].lgbtqia:active, input[type=datetime-local].lgbtqia:visited, input[type=month].lgbtqia:hover, input[type=month].lgbtqia:focus, input[type=month].lgbtqia:active, input[type=month].lgbtqia:visited, input[type=reset].lgbtqia:hover, input[type=reset].lgbtqia:focus, input[type=reset].lgbtqia:active, input[type=reset].lgbtqia:visited, input[type=submit].lgbtqia:hover, input[type=submit].lgbtqia:focus, input[type=submit].lgbtqia:active, input[type=submit].lgbtqia:visited, input[type=time].lgbtqia:hover, input[type=time].lgbtqia:focus, input[type=time].lgbtqia:active, input[type=time].lgbtqia:visited, input[type=week].lgbtqia:hover, input[type=week].lgbtqia:focus, input[type=week].lgbtqia:active, input[type=week].lgbtqia:visited {
  color: var(--color-true-white);
  border-color: transparent;
}
button.ghost, .button.ghost, input[type=button].ghost, input[type=color].ghost, input[type=date].ghost, input[type=datetime-local].ghost, input[type=month].ghost, input[type=reset].ghost, input[type=submit].ghost, input[type=time].ghost, input[type=week].ghost {
  background-color: transparent;
  background: transparent;
  border-style: var(--border-style);
  border-width: var(--border-width);
  border-color: var(--color-greyscale-1);
}
button.ghost:hover, button.ghost:focus, button.ghost:active, button.ghost:visited, .button.ghost:hover, .button.ghost:focus, .button.ghost:active, .button.ghost:visited, input[type=button].ghost:hover, input[type=button].ghost:focus, input[type=button].ghost:active, input[type=button].ghost:visited, input[type=color].ghost:hover, input[type=color].ghost:focus, input[type=color].ghost:active, input[type=color].ghost:visited, input[type=date].ghost:hover, input[type=date].ghost:focus, input[type=date].ghost:active, input[type=date].ghost:visited, input[type=datetime-local].ghost:hover, input[type=datetime-local].ghost:focus, input[type=datetime-local].ghost:active, input[type=datetime-local].ghost:visited, input[type=month].ghost:hover, input[type=month].ghost:focus, input[type=month].ghost:active, input[type=month].ghost:visited, input[type=reset].ghost:hover, input[type=reset].ghost:focus, input[type=reset].ghost:active, input[type=reset].ghost:visited, input[type=submit].ghost:hover, input[type=submit].ghost:focus, input[type=submit].ghost:active, input[type=submit].ghost:visited, input[type=time].ghost:hover, input[type=time].ghost:focus, input[type=time].ghost:active, input[type=time].ghost:visited, input[type=week].ghost:hover, input[type=week].ghost:focus, input[type=week].ghost:active, input[type=week].ghost:visited {
  color: var(--color-greyscale-3);
  border-color: var(--color-greyscale-3);
}
button.ghost.primary, .button.ghost.primary, input[type=button].ghost.primary, input[type=color].ghost.primary, input[type=date].ghost.primary, input[type=datetime-local].ghost.primary, input[type=month].ghost.primary, input[type=reset].ghost.primary, input[type=submit].ghost.primary, input[type=time].ghost.primary, input[type=week].ghost.primary {
  color: var(--color-primary-5);
  border-color: var(--color-primary-5);
}
button.ghost.primary:hover, button.ghost.primary:focus, button.ghost.primary:active, button.ghost.primary:visited, .button.ghost.primary:hover, .button.ghost.primary:focus, .button.ghost.primary:active, .button.ghost.primary:visited, input[type=button].ghost.primary:hover, input[type=button].ghost.primary:focus, input[type=button].ghost.primary:active, input[type=button].ghost.primary:visited, input[type=color].ghost.primary:hover, input[type=color].ghost.primary:focus, input[type=color].ghost.primary:active, input[type=color].ghost.primary:visited, input[type=date].ghost.primary:hover, input[type=date].ghost.primary:focus, input[type=date].ghost.primary:active, input[type=date].ghost.primary:visited, input[type=datetime-local].ghost.primary:hover, input[type=datetime-local].ghost.primary:focus, input[type=datetime-local].ghost.primary:active, input[type=datetime-local].ghost.primary:visited, input[type=month].ghost.primary:hover, input[type=month].ghost.primary:focus, input[type=month].ghost.primary:active, input[type=month].ghost.primary:visited, input[type=reset].ghost.primary:hover, input[type=reset].ghost.primary:focus, input[type=reset].ghost.primary:active, input[type=reset].ghost.primary:visited, input[type=submit].ghost.primary:hover, input[type=submit].ghost.primary:focus, input[type=submit].ghost.primary:active, input[type=submit].ghost.primary:visited, input[type=time].ghost.primary:hover, input[type=time].ghost.primary:focus, input[type=time].ghost.primary:active, input[type=time].ghost.primary:visited, input[type=week].ghost.primary:hover, input[type=week].ghost.primary:focus, input[type=week].ghost.primary:active, input[type=week].ghost.primary:visited {
  color: var(--color-primary-3);
  border-color: var(--color-primary-3);
}
button.ghost.secondary, .button.ghost.secondary, input[type=button].ghost.secondary, input[type=color].ghost.secondary, input[type=date].ghost.secondary, input[type=datetime-local].ghost.secondary, input[type=month].ghost.secondary, input[type=reset].ghost.secondary, input[type=submit].ghost.secondary, input[type=time].ghost.secondary, input[type=week].ghost.secondary {
  color: var(--color-secondary-5);
  border-color: var(--color-secondary-5);
}
button.ghost.secondary:hover, button.ghost.secondary:focus, button.ghost.secondary:active, button.ghost.secondary:visited, .button.ghost.secondary:hover, .button.ghost.secondary:focus, .button.ghost.secondary:active, .button.ghost.secondary:visited, input[type=button].ghost.secondary:hover, input[type=button].ghost.secondary:focus, input[type=button].ghost.secondary:active, input[type=button].ghost.secondary:visited, input[type=color].ghost.secondary:hover, input[type=color].ghost.secondary:focus, input[type=color].ghost.secondary:active, input[type=color].ghost.secondary:visited, input[type=date].ghost.secondary:hover, input[type=date].ghost.secondary:focus, input[type=date].ghost.secondary:active, input[type=date].ghost.secondary:visited, input[type=datetime-local].ghost.secondary:hover, input[type=datetime-local].ghost.secondary:focus, input[type=datetime-local].ghost.secondary:active, input[type=datetime-local].ghost.secondary:visited, input[type=month].ghost.secondary:hover, input[type=month].ghost.secondary:focus, input[type=month].ghost.secondary:active, input[type=month].ghost.secondary:visited, input[type=reset].ghost.secondary:hover, input[type=reset].ghost.secondary:focus, input[type=reset].ghost.secondary:active, input[type=reset].ghost.secondary:visited, input[type=submit].ghost.secondary:hover, input[type=submit].ghost.secondary:focus, input[type=submit].ghost.secondary:active, input[type=submit].ghost.secondary:visited, input[type=time].ghost.secondary:hover, input[type=time].ghost.secondary:focus, input[type=time].ghost.secondary:active, input[type=time].ghost.secondary:visited, input[type=week].ghost.secondary:hover, input[type=week].ghost.secondary:focus, input[type=week].ghost.secondary:active, input[type=week].ghost.secondary:visited {
  color: var(--color-secondary-3);
  border-color: var(--color-secondary-3);
}
button.ghost.white, .button.ghost.white, input[type=button].ghost.white, input[type=color].ghost.white, input[type=date].ghost.white, input[type=datetime-local].ghost.white, input[type=month].ghost.white, input[type=reset].ghost.white, input[type=submit].ghost.white, input[type=time].ghost.white, input[type=week].ghost.white {
  color: var(--color-greyscale-9);
  border-color: var(--color-greyscale-9);
}
button.ghost.white:hover, button.ghost.white:focus, button.ghost.white:active, button.ghost.white:visited, .button.ghost.white:hover, .button.ghost.white:focus, .button.ghost.white:active, .button.ghost.white:visited, input[type=button].ghost.white:hover, input[type=button].ghost.white:focus, input[type=button].ghost.white:active, input[type=button].ghost.white:visited, input[type=color].ghost.white:hover, input[type=color].ghost.white:focus, input[type=color].ghost.white:active, input[type=color].ghost.white:visited, input[type=date].ghost.white:hover, input[type=date].ghost.white:focus, input[type=date].ghost.white:active, input[type=date].ghost.white:visited, input[type=datetime-local].ghost.white:hover, input[type=datetime-local].ghost.white:focus, input[type=datetime-local].ghost.white:active, input[type=datetime-local].ghost.white:visited, input[type=month].ghost.white:hover, input[type=month].ghost.white:focus, input[type=month].ghost.white:active, input[type=month].ghost.white:visited, input[type=reset].ghost.white:hover, input[type=reset].ghost.white:focus, input[type=reset].ghost.white:active, input[type=reset].ghost.white:visited, input[type=submit].ghost.white:hover, input[type=submit].ghost.white:focus, input[type=submit].ghost.white:active, input[type=submit].ghost.white:visited, input[type=time].ghost.white:hover, input[type=time].ghost.white:focus, input[type=time].ghost.white:active, input[type=time].ghost.white:visited, input[type=week].ghost.white:hover, input[type=week].ghost.white:focus, input[type=week].ghost.white:active, input[type=week].ghost.white:visited {
  color: var(--color-greyscale-9);
  border-color: var(--color-greyscale-9);
}
button.ghost.grey, .button.ghost.grey, input[type=button].ghost.grey, input[type=color].ghost.grey, input[type=date].ghost.grey, input[type=datetime-local].ghost.grey, input[type=month].ghost.grey, input[type=reset].ghost.grey, input[type=submit].ghost.grey, input[type=time].ghost.grey, input[type=week].ghost.grey {
  color: var(--color-greyscale-5);
  border-color: var(--color-greyscale-5);
}
button.ghost.grey:hover, button.ghost.grey:focus, button.ghost.grey:active, button.ghost.grey:visited, .button.ghost.grey:hover, .button.ghost.grey:focus, .button.ghost.grey:active, .button.ghost.grey:visited, input[type=button].ghost.grey:hover, input[type=button].ghost.grey:focus, input[type=button].ghost.grey:active, input[type=button].ghost.grey:visited, input[type=color].ghost.grey:hover, input[type=color].ghost.grey:focus, input[type=color].ghost.grey:active, input[type=color].ghost.grey:visited, input[type=date].ghost.grey:hover, input[type=date].ghost.grey:focus, input[type=date].ghost.grey:active, input[type=date].ghost.grey:visited, input[type=datetime-local].ghost.grey:hover, input[type=datetime-local].ghost.grey:focus, input[type=datetime-local].ghost.grey:active, input[type=datetime-local].ghost.grey:visited, input[type=month].ghost.grey:hover, input[type=month].ghost.grey:focus, input[type=month].ghost.grey:active, input[type=month].ghost.grey:visited, input[type=reset].ghost.grey:hover, input[type=reset].ghost.grey:focus, input[type=reset].ghost.grey:active, input[type=reset].ghost.grey:visited, input[type=submit].ghost.grey:hover, input[type=submit].ghost.grey:focus, input[type=submit].ghost.grey:active, input[type=submit].ghost.grey:visited, input[type=time].ghost.grey:hover, input[type=time].ghost.grey:focus, input[type=time].ghost.grey:active, input[type=time].ghost.grey:visited, input[type=week].ghost.grey:hover, input[type=week].ghost.grey:focus, input[type=week].ghost.grey:active, input[type=week].ghost.grey:visited {
  color: var(--color-greyscale-4);
  border-color: var(--color-greyscale-4);
}
button.ghost.black, .button.ghost.black, input[type=button].ghost.black, input[type=color].ghost.black, input[type=date].ghost.black, input[type=datetime-local].ghost.black, input[type=month].ghost.black, input[type=reset].ghost.black, input[type=submit].ghost.black, input[type=time].ghost.black, input[type=week].ghost.black {
  color: var(--color-greyscale-0);
  border-color: var(--color-greyscale-0);
}
button.ghost.black:hover, button.ghost.black:focus, button.ghost.black:active, button.ghost.black:visited, .button.ghost.black:hover, .button.ghost.black:focus, .button.ghost.black:active, .button.ghost.black:visited, input[type=button].ghost.black:hover, input[type=button].ghost.black:focus, input[type=button].ghost.black:active, input[type=button].ghost.black:visited, input[type=color].ghost.black:hover, input[type=color].ghost.black:focus, input[type=color].ghost.black:active, input[type=color].ghost.black:visited, input[type=date].ghost.black:hover, input[type=date].ghost.black:focus, input[type=date].ghost.black:active, input[type=date].ghost.black:visited, input[type=datetime-local].ghost.black:hover, input[type=datetime-local].ghost.black:focus, input[type=datetime-local].ghost.black:active, input[type=datetime-local].ghost.black:visited, input[type=month].ghost.black:hover, input[type=month].ghost.black:focus, input[type=month].ghost.black:active, input[type=month].ghost.black:visited, input[type=reset].ghost.black:hover, input[type=reset].ghost.black:focus, input[type=reset].ghost.black:active, input[type=reset].ghost.black:visited, input[type=submit].ghost.black:hover, input[type=submit].ghost.black:focus, input[type=submit].ghost.black:active, input[type=submit].ghost.black:visited, input[type=time].ghost.black:hover, input[type=time].ghost.black:focus, input[type=time].ghost.black:active, input[type=time].ghost.black:visited, input[type=week].ghost.black:hover, input[type=week].ghost.black:focus, input[type=week].ghost.black:active, input[type=week].ghost.black:visited {
  color: var(--color-greyscale-3);
  border-color: var(--color-greyscale-3);
}
button.ghost.lgbtqia, .button.ghost.lgbtqia, input[type=button].ghost.lgbtqia, input[type=color].ghost.lgbtqia, input[type=date].ghost.lgbtqia, input[type=datetime-local].ghost.lgbtqia, input[type=month].ghost.lgbtqia, input[type=reset].ghost.lgbtqia, input[type=submit].ghost.lgbtqia, input[type=time].ghost.lgbtqia, input[type=week].ghost.lgbtqia {
  background-image: var(--color-lgbtqia);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100% 50%;
  background-image: var(--color-lgbtqia-5);
  border-color: transparent;
  color: var(--color-lgbtqia-yellow-5);
}
button.ghost.lgbtqia:hover, button.ghost.lgbtqia:focus, button.ghost.lgbtqia:active, button.ghost.lgbtqia:visited, .button.ghost.lgbtqia:hover, .button.ghost.lgbtqia:focus, .button.ghost.lgbtqia:active, .button.ghost.lgbtqia:visited, input[type=button].ghost.lgbtqia:hover, input[type=button].ghost.lgbtqia:focus, input[type=button].ghost.lgbtqia:active, input[type=button].ghost.lgbtqia:visited, input[type=color].ghost.lgbtqia:hover, input[type=color].ghost.lgbtqia:focus, input[type=color].ghost.lgbtqia:active, input[type=color].ghost.lgbtqia:visited, input[type=date].ghost.lgbtqia:hover, input[type=date].ghost.lgbtqia:focus, input[type=date].ghost.lgbtqia:active, input[type=date].ghost.lgbtqia:visited, input[type=datetime-local].ghost.lgbtqia:hover, input[type=datetime-local].ghost.lgbtqia:focus, input[type=datetime-local].ghost.lgbtqia:active, input[type=datetime-local].ghost.lgbtqia:visited, input[type=month].ghost.lgbtqia:hover, input[type=month].ghost.lgbtqia:focus, input[type=month].ghost.lgbtqia:active, input[type=month].ghost.lgbtqia:visited, input[type=reset].ghost.lgbtqia:hover, input[type=reset].ghost.lgbtqia:focus, input[type=reset].ghost.lgbtqia:active, input[type=reset].ghost.lgbtqia:visited, input[type=submit].ghost.lgbtqia:hover, input[type=submit].ghost.lgbtqia:focus, input[type=submit].ghost.lgbtqia:active, input[type=submit].ghost.lgbtqia:visited, input[type=time].ghost.lgbtqia:hover, input[type=time].ghost.lgbtqia:focus, input[type=time].ghost.lgbtqia:active, input[type=time].ghost.lgbtqia:visited, input[type=week].ghost.lgbtqia:hover, input[type=week].ghost.lgbtqia:focus, input[type=week].ghost.lgbtqia:active, input[type=week].ghost.lgbtqia:visited {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: var(--color-lgbtqia-5);
  background-position: 0% 50%;
  color: var(--color-lgbtqia-blue-5);
  border-color: transparent;
}
button.ghost:hover, button.ghost:focus, button.ghost:active, button.ghost:visited, .button.ghost:hover, .button.ghost:focus, .button.ghost:active, .button.ghost:visited, input[type=button].ghost:hover, input[type=button].ghost:focus, input[type=button].ghost:active, input[type=button].ghost:visited, input[type=color].ghost:hover, input[type=color].ghost:focus, input[type=color].ghost:active, input[type=color].ghost:visited, input[type=date].ghost:hover, input[type=date].ghost:focus, input[type=date].ghost:active, input[type=date].ghost:visited, input[type=datetime-local].ghost:hover, input[type=datetime-local].ghost:focus, input[type=datetime-local].ghost:active, input[type=datetime-local].ghost:visited, input[type=month].ghost:hover, input[type=month].ghost:focus, input[type=month].ghost:active, input[type=month].ghost:visited, input[type=reset].ghost:hover, input[type=reset].ghost:focus, input[type=reset].ghost:active, input[type=reset].ghost:visited, input[type=submit].ghost:hover, input[type=submit].ghost:focus, input[type=submit].ghost:active, input[type=submit].ghost:visited, input[type=time].ghost:hover, input[type=time].ghost:focus, input[type=time].ghost:active, input[type=time].ghost:visited, input[type=week].ghost:hover, input[type=week].ghost:focus, input[type=week].ghost:active, input[type=week].ghost:visited {
  background: transparent;
  background-color: transparent;
}
button.tertiary, .button.tertiary, input[type=button].tertiary, input[type=color].tertiary, input[type=date].tertiary, input[type=datetime-local].tertiary, input[type=month].tertiary, input[type=reset].tertiary, input[type=submit].tertiary, input[type=time].tertiary, input[type=week].tertiary {
  background-color: transparent;
  background: transparent;
  border-color: transparent;
}
button.tertiary:hover, button.tertiary:focus, button.tertiary:active, button.tertiary:visited, .button.tertiary:hover, .button.tertiary:focus, .button.tertiary:active, .button.tertiary:visited, input[type=button].tertiary:hover, input[type=button].tertiary:focus, input[type=button].tertiary:active, input[type=button].tertiary:visited, input[type=color].tertiary:hover, input[type=color].tertiary:focus, input[type=color].tertiary:active, input[type=color].tertiary:visited, input[type=date].tertiary:hover, input[type=date].tertiary:focus, input[type=date].tertiary:active, input[type=date].tertiary:visited, input[type=datetime-local].tertiary:hover, input[type=datetime-local].tertiary:focus, input[type=datetime-local].tertiary:active, input[type=datetime-local].tertiary:visited, input[type=month].tertiary:hover, input[type=month].tertiary:focus, input[type=month].tertiary:active, input[type=month].tertiary:visited, input[type=reset].tertiary:hover, input[type=reset].tertiary:focus, input[type=reset].tertiary:active, input[type=reset].tertiary:visited, input[type=submit].tertiary:hover, input[type=submit].tertiary:focus, input[type=submit].tertiary:active, input[type=submit].tertiary:visited, input[type=time].tertiary:hover, input[type=time].tertiary:focus, input[type=time].tertiary:active, input[type=time].tertiary:visited, input[type=week].tertiary:hover, input[type=week].tertiary:focus, input[type=week].tertiary:active, input[type=week].tertiary:visited {
  color: var(--color-greyscale-3);
}
button.tertiary.primary, .button.tertiary.primary, input[type=button].tertiary.primary, input[type=color].tertiary.primary, input[type=date].tertiary.primary, input[type=datetime-local].tertiary.primary, input[type=month].tertiary.primary, input[type=reset].tertiary.primary, input[type=submit].tertiary.primary, input[type=time].tertiary.primary, input[type=week].tertiary.primary {
  color: var(--color-primary-5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -moz-linear-gradient(45deg, var(--color-primary-4) 20%, var(--color-primary-5) 50%, var(--color-primary-6) 80%);
  background-image: -webkit-linear-gradient(45deg, var(--color-primary-4) 20%, var(--color-primary-5) 50%, var(--color-primary-6) 80%);
  background-image: linear-gradient(45deg, var(--color-primary-4) 20%, var(--color-primary-5) 50%, var(--color-primary-6) 80%);
  background-size: 220% 120%;
  background-position: 90% 50%;
}
button.tertiary.primary:hover, button.tertiary.primary:focus, button.tertiary.primary:active, button.tertiary.primary:visited, .button.tertiary.primary:hover, .button.tertiary.primary:focus, .button.tertiary.primary:active, .button.tertiary.primary:visited, input[type=button].tertiary.primary:hover, input[type=button].tertiary.primary:focus, input[type=button].tertiary.primary:active, input[type=button].tertiary.primary:visited, input[type=color].tertiary.primary:hover, input[type=color].tertiary.primary:focus, input[type=color].tertiary.primary:active, input[type=color].tertiary.primary:visited, input[type=date].tertiary.primary:hover, input[type=date].tertiary.primary:focus, input[type=date].tertiary.primary:active, input[type=date].tertiary.primary:visited, input[type=datetime-local].tertiary.primary:hover, input[type=datetime-local].tertiary.primary:focus, input[type=datetime-local].tertiary.primary:active, input[type=datetime-local].tertiary.primary:visited, input[type=month].tertiary.primary:hover, input[type=month].tertiary.primary:focus, input[type=month].tertiary.primary:active, input[type=month].tertiary.primary:visited, input[type=reset].tertiary.primary:hover, input[type=reset].tertiary.primary:focus, input[type=reset].tertiary.primary:active, input[type=reset].tertiary.primary:visited, input[type=submit].tertiary.primary:hover, input[type=submit].tertiary.primary:focus, input[type=submit].tertiary.primary:active, input[type=submit].tertiary.primary:visited, input[type=time].tertiary.primary:hover, input[type=time].tertiary.primary:focus, input[type=time].tertiary.primary:active, input[type=time].tertiary.primary:visited, input[type=week].tertiary.primary:hover, input[type=week].tertiary.primary:focus, input[type=week].tertiary.primary:active, input[type=week].tertiary.primary:visited {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -moz-linear-gradient(45deg, var(--color-primary-4) 20%, var(--color-primary-5) 50%, var(--color-primary-6) 80%);
  background-image: -webkit-linear-gradient(45deg, var(--color-primary-4) 20%, var(--color-primary-5) 50%, var(--color-primary-6) 80%);
  background-image: linear-gradient(45deg, var(--color-primary-4) 20%, var(--color-primary-5) 50%, var(--color-primary-6) 80%);
  background-position: 10% 50%;
}
button.tertiary.secondary, .button.tertiary.secondary, input[type=button].tertiary.secondary, input[type=color].tertiary.secondary, input[type=date].tertiary.secondary, input[type=datetime-local].tertiary.secondary, input[type=month].tertiary.secondary, input[type=reset].tertiary.secondary, input[type=submit].tertiary.secondary, input[type=time].tertiary.secondary, input[type=week].tertiary.secondary {
  color: var(--color-secondary-5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 220% 120%;
  background-position: 90% 50%;
  background-image: -moz-linear-gradient(45deg, var(--color-secondary-4) 20%, var(--color-secondary-5) 50%, var(--color-secondary-6) 80%);
  background-image: -webkit-linear-gradient(45deg, var(--color-secondary-4) 20%, var(--color-secondary-5) 50%, var(--color-secondary-6) 80%);
  background-image: linear-gradient(45deg, var(--color-secondary-4) 20%, var(--color-secondary-5) 50%, var(--color-secondary-6) 80%);
}
button.tertiary.secondary:hover, button.tertiary.secondary:focus, button.tertiary.secondary:active, button.tertiary.secondary:visited, .button.tertiary.secondary:hover, .button.tertiary.secondary:focus, .button.tertiary.secondary:active, .button.tertiary.secondary:visited, input[type=button].tertiary.secondary:hover, input[type=button].tertiary.secondary:focus, input[type=button].tertiary.secondary:active, input[type=button].tertiary.secondary:visited, input[type=color].tertiary.secondary:hover, input[type=color].tertiary.secondary:focus, input[type=color].tertiary.secondary:active, input[type=color].tertiary.secondary:visited, input[type=date].tertiary.secondary:hover, input[type=date].tertiary.secondary:focus, input[type=date].tertiary.secondary:active, input[type=date].tertiary.secondary:visited, input[type=datetime-local].tertiary.secondary:hover, input[type=datetime-local].tertiary.secondary:focus, input[type=datetime-local].tertiary.secondary:active, input[type=datetime-local].tertiary.secondary:visited, input[type=month].tertiary.secondary:hover, input[type=month].tertiary.secondary:focus, input[type=month].tertiary.secondary:active, input[type=month].tertiary.secondary:visited, input[type=reset].tertiary.secondary:hover, input[type=reset].tertiary.secondary:focus, input[type=reset].tertiary.secondary:active, input[type=reset].tertiary.secondary:visited, input[type=submit].tertiary.secondary:hover, input[type=submit].tertiary.secondary:focus, input[type=submit].tertiary.secondary:active, input[type=submit].tertiary.secondary:visited, input[type=time].tertiary.secondary:hover, input[type=time].tertiary.secondary:focus, input[type=time].tertiary.secondary:active, input[type=time].tertiary.secondary:visited, input[type=week].tertiary.secondary:hover, input[type=week].tertiary.secondary:focus, input[type=week].tertiary.secondary:active, input[type=week].tertiary.secondary:visited {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -moz-linear-gradient(45deg, var(--color-secondary-4) 20%, var(--color-secondary-5) 50%, var(--color-secondary-6) 80%);
  background-image: -webkit-linear-gradient(45deg, var(--color-secondary-4) 20%, var(--color-secondary-5) 50%, var(--color-secondary-6) 80%);
  background-image: linear-gradient(45deg, var(--color-secondary-4) 20%, var(--color-secondary-5) 50%, var(--color-secondary-6) 80%);
  background-position: 10% 50%;
}
button.tertiary.white, .button.tertiary.white, input[type=button].tertiary.white, input[type=color].tertiary.white, input[type=date].tertiary.white, input[type=datetime-local].tertiary.white, input[type=month].tertiary.white, input[type=reset].tertiary.white, input[type=submit].tertiary.white, input[type=time].tertiary.white, input[type=week].tertiary.white {
  color: var(--color-greyscale-9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 220% 120%;
  background-position: 90% 50%;
  background-image: -moz-linear-gradient(45deg, var(--color-greyscale-7) 20%, var(--color-greyscale-8) 50%, var(--color-greyscale-9) 80%);
  background-image: -webkit-linear-gradient(45deg, var(--color-greyscale-7) 20%, var(--color-greyscale-8) 50%, var(--color-greyscale-9) 80%);
  background-image: linear-gradient(45deg, var(--color-greyscale-7) 20%, var(--color-greyscale-8) 50%, var(--color-greyscale-9) 80%);
}
button.tertiary.white:hover, button.tertiary.white:focus, button.tertiary.white:active, button.tertiary.white:visited, .button.tertiary.white:hover, .button.tertiary.white:focus, .button.tertiary.white:active, .button.tertiary.white:visited, input[type=button].tertiary.white:hover, input[type=button].tertiary.white:focus, input[type=button].tertiary.white:active, input[type=button].tertiary.white:visited, input[type=color].tertiary.white:hover, input[type=color].tertiary.white:focus, input[type=color].tertiary.white:active, input[type=color].tertiary.white:visited, input[type=date].tertiary.white:hover, input[type=date].tertiary.white:focus, input[type=date].tertiary.white:active, input[type=date].tertiary.white:visited, input[type=datetime-local].tertiary.white:hover, input[type=datetime-local].tertiary.white:focus, input[type=datetime-local].tertiary.white:active, input[type=datetime-local].tertiary.white:visited, input[type=month].tertiary.white:hover, input[type=month].tertiary.white:focus, input[type=month].tertiary.white:active, input[type=month].tertiary.white:visited, input[type=reset].tertiary.white:hover, input[type=reset].tertiary.white:focus, input[type=reset].tertiary.white:active, input[type=reset].tertiary.white:visited, input[type=submit].tertiary.white:hover, input[type=submit].tertiary.white:focus, input[type=submit].tertiary.white:active, input[type=submit].tertiary.white:visited, input[type=time].tertiary.white:hover, input[type=time].tertiary.white:focus, input[type=time].tertiary.white:active, input[type=time].tertiary.white:visited, input[type=week].tertiary.white:hover, input[type=week].tertiary.white:focus, input[type=week].tertiary.white:active, input[type=week].tertiary.white:visited {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -moz-linear-gradient(45deg, var(--color-greyscale-7) 20%, var(--color-greyscale-8) 50%, var(--color-greyscale-9) 80%);
  background-image: -webkit-linear-gradient(45deg, var(--color-greyscale-7) 20%, var(--color-greyscale-8) 50%, var(--color-greyscale-9) 80%);
  background-image: linear-gradient(45deg, var(--color-greyscale-7) 20%, var(--color-greyscale-8) 50%, var(--color-greyscale-9) 80%);
  background-position: 10% 50%;
}
button.tertiary.grey, .button.tertiary.grey, input[type=button].tertiary.grey, input[type=color].tertiary.grey, input[type=date].tertiary.grey, input[type=datetime-local].tertiary.grey, input[type=month].tertiary.grey, input[type=reset].tertiary.grey, input[type=submit].tertiary.grey, input[type=time].tertiary.grey, input[type=week].tertiary.grey {
  color: var(--color-greyscale-5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 220% 120%;
  background-position: 90% 50%;
  background-image: -moz-linear-gradient(45deg, var(--color-greyscale-4) 20%, var(--color-greyscale-5) 50%, var(--color-greyscale-6) 80%);
  background-image: -webkit-linear-gradient(45deg, var(--color-greyscale-4) 20%, var(--color-greyscale-5) 50%, var(--color-greyscale-6) 80%);
  background-image: linear-gradient(45deg, var(--color-greyscale-4) 20%, var(--color-greyscale-5) 50%, var(--color-greyscale-6) 80%);
}
button.tertiary.grey:hover, button.tertiary.grey:focus, button.tertiary.grey:active, button.tertiary.grey:visited, .button.tertiary.grey:hover, .button.tertiary.grey:focus, .button.tertiary.grey:active, .button.tertiary.grey:visited, input[type=button].tertiary.grey:hover, input[type=button].tertiary.grey:focus, input[type=button].tertiary.grey:active, input[type=button].tertiary.grey:visited, input[type=color].tertiary.grey:hover, input[type=color].tertiary.grey:focus, input[type=color].tertiary.grey:active, input[type=color].tertiary.grey:visited, input[type=date].tertiary.grey:hover, input[type=date].tertiary.grey:focus, input[type=date].tertiary.grey:active, input[type=date].tertiary.grey:visited, input[type=datetime-local].tertiary.grey:hover, input[type=datetime-local].tertiary.grey:focus, input[type=datetime-local].tertiary.grey:active, input[type=datetime-local].tertiary.grey:visited, input[type=month].tertiary.grey:hover, input[type=month].tertiary.grey:focus, input[type=month].tertiary.grey:active, input[type=month].tertiary.grey:visited, input[type=reset].tertiary.grey:hover, input[type=reset].tertiary.grey:focus, input[type=reset].tertiary.grey:active, input[type=reset].tertiary.grey:visited, input[type=submit].tertiary.grey:hover, input[type=submit].tertiary.grey:focus, input[type=submit].tertiary.grey:active, input[type=submit].tertiary.grey:visited, input[type=time].tertiary.grey:hover, input[type=time].tertiary.grey:focus, input[type=time].tertiary.grey:active, input[type=time].tertiary.grey:visited, input[type=week].tertiary.grey:hover, input[type=week].tertiary.grey:focus, input[type=week].tertiary.grey:active, input[type=week].tertiary.grey:visited {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -moz-linear-gradient(45deg, var(--color-greyscale-4) 20%, var(--color-greyscale-5) 50%, var(--color-greyscale-6) 80%);
  background-image: -webkit-linear-gradient(45deg, var(--color-greyscale-4) 20%, var(--color-greyscale-5) 50%, var(--color-greyscale-6) 80%);
  background-image: linear-gradient(45deg, var(--color-greyscale-4) 20%, var(--color-greyscale-5) 50%, var(--color-greyscale-6) 80%);
  background-position: 10% 50%;
}
button.tertiary.black, .button.tertiary.black, input[type=button].tertiary.black, input[type=color].tertiary.black, input[type=date].tertiary.black, input[type=datetime-local].tertiary.black, input[type=month].tertiary.black, input[type=reset].tertiary.black, input[type=submit].tertiary.black, input[type=time].tertiary.black, input[type=week].tertiary.black {
  color: var(--color-greyscale-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 220% 120%;
  background-position: 90% 50%;
  background-image: -moz-linear-gradient(45deg, var(--color-greyscale-3) 20%, var(--color-greyscale-2) 50%, var(--color-greyscale-1) 80%);
  background-image: -webkit-linear-gradient(45deg, var(--color-greyscale-3) 20%, var(--color-greyscale-2) 50%, var(--color-greyscale-1) 80%);
  background-image: linear-gradient(45deg, var(--color-greyscale-3) 20%, var(--color-greyscale-2) 50%, var(--color-greyscale-1) 80%);
}
button.tertiary.black:hover, button.tertiary.black:focus, button.tertiary.black:active, button.tertiary.black:visited, .button.tertiary.black:hover, .button.tertiary.black:focus, .button.tertiary.black:active, .button.tertiary.black:visited, input[type=button].tertiary.black:hover, input[type=button].tertiary.black:focus, input[type=button].tertiary.black:active, input[type=button].tertiary.black:visited, input[type=color].tertiary.black:hover, input[type=color].tertiary.black:focus, input[type=color].tertiary.black:active, input[type=color].tertiary.black:visited, input[type=date].tertiary.black:hover, input[type=date].tertiary.black:focus, input[type=date].tertiary.black:active, input[type=date].tertiary.black:visited, input[type=datetime-local].tertiary.black:hover, input[type=datetime-local].tertiary.black:focus, input[type=datetime-local].tertiary.black:active, input[type=datetime-local].tertiary.black:visited, input[type=month].tertiary.black:hover, input[type=month].tertiary.black:focus, input[type=month].tertiary.black:active, input[type=month].tertiary.black:visited, input[type=reset].tertiary.black:hover, input[type=reset].tertiary.black:focus, input[type=reset].tertiary.black:active, input[type=reset].tertiary.black:visited, input[type=submit].tertiary.black:hover, input[type=submit].tertiary.black:focus, input[type=submit].tertiary.black:active, input[type=submit].tertiary.black:visited, input[type=time].tertiary.black:hover, input[type=time].tertiary.black:focus, input[type=time].tertiary.black:active, input[type=time].tertiary.black:visited, input[type=week].tertiary.black:hover, input[type=week].tertiary.black:focus, input[type=week].tertiary.black:active, input[type=week].tertiary.black:visited {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: -moz-linear-gradient(45deg, var(--color-greyscale-3) 20%, var(--color-greyscale-2) 50%, var(--color-greyscale-1) 80%);
  background-image: -webkit-linear-gradient(45deg, var(--color-greyscale-3) 20%, var(--color-greyscale-2) 50%, var(--color-greyscale-1) 80%);
  background-image: linear-gradient(45deg, var(--color-greyscale-3) 20%, var(--color-greyscale-2) 50%, var(--color-greyscale-1) 80%);
  background-position: 10% 50%;
}
button.tertiary.lgbtqia, .button.tertiary.lgbtqia, input[type=button].tertiary.lgbtqia, input[type=color].tertiary.lgbtqia, input[type=date].tertiary.lgbtqia, input[type=datetime-local].tertiary.lgbtqia, input[type=month].tertiary.lgbtqia, input[type=reset].tertiary.lgbtqia, input[type=submit].tertiary.lgbtqia, input[type=time].tertiary.lgbtqia, input[type=week].tertiary.lgbtqia {
  background-image: var(--color-lgbtqia-5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 220% 120%;
  background-position: 90% 50%;
  background-image: var(--color-lgbtqia-5);
  color: var(--color-lgbtqia-yellow-5);
}
button.tertiary.lgbtqia:hover, button.tertiary.lgbtqia:focus, button.tertiary.lgbtqia:active, button.tertiary.lgbtqia:visited, .button.tertiary.lgbtqia:hover, .button.tertiary.lgbtqia:focus, .button.tertiary.lgbtqia:active, .button.tertiary.lgbtqia:visited, input[type=button].tertiary.lgbtqia:hover, input[type=button].tertiary.lgbtqia:focus, input[type=button].tertiary.lgbtqia:active, input[type=button].tertiary.lgbtqia:visited, input[type=color].tertiary.lgbtqia:hover, input[type=color].tertiary.lgbtqia:focus, input[type=color].tertiary.lgbtqia:active, input[type=color].tertiary.lgbtqia:visited, input[type=date].tertiary.lgbtqia:hover, input[type=date].tertiary.lgbtqia:focus, input[type=date].tertiary.lgbtqia:active, input[type=date].tertiary.lgbtqia:visited, input[type=datetime-local].tertiary.lgbtqia:hover, input[type=datetime-local].tertiary.lgbtqia:focus, input[type=datetime-local].tertiary.lgbtqia:active, input[type=datetime-local].tertiary.lgbtqia:visited, input[type=month].tertiary.lgbtqia:hover, input[type=month].tertiary.lgbtqia:focus, input[type=month].tertiary.lgbtqia:active, input[type=month].tertiary.lgbtqia:visited, input[type=reset].tertiary.lgbtqia:hover, input[type=reset].tertiary.lgbtqia:focus, input[type=reset].tertiary.lgbtqia:active, input[type=reset].tertiary.lgbtqia:visited, input[type=submit].tertiary.lgbtqia:hover, input[type=submit].tertiary.lgbtqia:focus, input[type=submit].tertiary.lgbtqia:active, input[type=submit].tertiary.lgbtqia:visited, input[type=time].tertiary.lgbtqia:hover, input[type=time].tertiary.lgbtqia:focus, input[type=time].tertiary.lgbtqia:active, input[type=time].tertiary.lgbtqia:visited, input[type=week].tertiary.lgbtqia:hover, input[type=week].tertiary.lgbtqia:focus, input[type=week].tertiary.lgbtqia:active, input[type=week].tertiary.lgbtqia:visited {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: var(--color-lgbtqia-5);
  background-position: 10% 50%;
  color: var(--color-lgbtqia-blue-5);
}
button.tertiary:hover, button.tertiary:focus, button.tertiary:active, button.tertiary:visited, .button.tertiary:hover, .button.tertiary:focus, .button.tertiary:active, .button.tertiary:visited, input[type=button].tertiary:hover, input[type=button].tertiary:focus, input[type=button].tertiary:active, input[type=button].tertiary:visited, input[type=color].tertiary:hover, input[type=color].tertiary:focus, input[type=color].tertiary:active, input[type=color].tertiary:visited, input[type=date].tertiary:hover, input[type=date].tertiary:focus, input[type=date].tertiary:active, input[type=date].tertiary:visited, input[type=datetime-local].tertiary:hover, input[type=datetime-local].tertiary:focus, input[type=datetime-local].tertiary:active, input[type=datetime-local].tertiary:visited, input[type=month].tertiary:hover, input[type=month].tertiary:focus, input[type=month].tertiary:active, input[type=month].tertiary:visited, input[type=reset].tertiary:hover, input[type=reset].tertiary:focus, input[type=reset].tertiary:active, input[type=reset].tertiary:visited, input[type=submit].tertiary:hover, input[type=submit].tertiary:focus, input[type=submit].tertiary:active, input[type=submit].tertiary:visited, input[type=time].tertiary:hover, input[type=time].tertiary:focus, input[type=time].tertiary:active, input[type=time].tertiary:visited, input[type=week].tertiary:hover, input[type=week].tertiary:focus, input[type=week].tertiary:active, input[type=week].tertiary:visited {
  background-color: transparent;
  background: transparent;
  border-color: transparent;
}
button[disabled], button[disabled]:hover, button[disabled]:focus, button[disabled]:active, button[disabled]:visited, button .disabled, button.disabled:hover, button.disabled:focus, button.disabled:active, button.disabled:visited, .button[disabled], .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active, .button[disabled]:visited, .button .disabled, .button.disabled:hover, .button.disabled:focus, .button.disabled:active, .button.disabled:visited, input[type=button][disabled], input[type=button][disabled]:hover, input[type=button][disabled]:focus, input[type=button][disabled]:active, input[type=button][disabled]:visited, input[type=button] .disabled, input[type=button].disabled:hover, input[type=button].disabled:focus, input[type=button].disabled:active, input[type=button].disabled:visited, input[type=color][disabled], input[type=color][disabled]:hover, input[type=color][disabled]:focus, input[type=color][disabled]:active, input[type=color][disabled]:visited, input[type=color] .disabled, input[type=color].disabled:hover, input[type=color].disabled:focus, input[type=color].disabled:active, input[type=color].disabled:visited, input[type=date][disabled], input[type=date][disabled]:hover, input[type=date][disabled]:focus, input[type=date][disabled]:active, input[type=date][disabled]:visited, input[type=date] .disabled, input[type=date].disabled:hover, input[type=date].disabled:focus, input[type=date].disabled:active, input[type=date].disabled:visited, input[type=datetime-local][disabled], input[type=datetime-local][disabled]:hover, input[type=datetime-local][disabled]:focus, input[type=datetime-local][disabled]:active, input[type=datetime-local][disabled]:visited, input[type=datetime-local] .disabled, input[type=datetime-local].disabled:hover, input[type=datetime-local].disabled:focus, input[type=datetime-local].disabled:active, input[type=datetime-local].disabled:visited, input[type=month][disabled], input[type=month][disabled]:hover, input[type=month][disabled]:focus, input[type=month][disabled]:active, input[type=month][disabled]:visited, input[type=month] .disabled, input[type=month].disabled:hover, input[type=month].disabled:focus, input[type=month].disabled:active, input[type=month].disabled:visited, input[type=reset][disabled], input[type=reset][disabled]:hover, input[type=reset][disabled]:focus, input[type=reset][disabled]:active, input[type=reset][disabled]:visited, input[type=reset] .disabled, input[type=reset].disabled:hover, input[type=reset].disabled:focus, input[type=reset].disabled:active, input[type=reset].disabled:visited, input[type=submit][disabled], input[type=submit][disabled]:hover, input[type=submit][disabled]:focus, input[type=submit][disabled]:active, input[type=submit][disabled]:visited, input[type=submit] .disabled, input[type=submit].disabled:hover, input[type=submit].disabled:focus, input[type=submit].disabled:active, input[type=submit].disabled:visited, input[type=time][disabled], input[type=time][disabled]:hover, input[type=time][disabled]:focus, input[type=time][disabled]:active, input[type=time][disabled]:visited, input[type=time] .disabled, input[type=time].disabled:hover, input[type=time].disabled:focus, input[type=time].disabled:active, input[type=time].disabled:visited, input[type=week][disabled], input[type=week][disabled]:hover, input[type=week][disabled]:focus, input[type=week][disabled]:active, input[type=week][disabled]:visited, input[type=week] .disabled, input[type=week].disabled:hover, input[type=week].disabled:focus, input[type=week].disabled:active, input[type=week].disabled:visited {
  cursor: not-allowed !important;
  background: var(--color-greyscale-9) !important;
  background-color: var(--color-greyscale-9) !important;
  border-width: var(--border-width) !important;
  border-style: var(--border-style) !important;
  border-color: var(--color-greyscale-9) !important;
  color: var(--color-greyscale-7) !important;
  box-shadow: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  cursor: not-allowed !important;
  --primary-icon-color: var(--color-greyscale-7) !important;
  --secondary-icon-color: var(--color-greyscale-7) !important;
}
button svg, .button svg, input[type=button] svg, input[type=color] svg, input[type=date] svg, input[type=datetime-local] svg, input[type=month] svg, input[type=reset] svg, input[type=submit] svg, input[type=time] svg, input[type=week] svg {
  display: inline-block;
  width: 10px;
  height: 10px;
  transform: scale(1.5);
  color: inherit;
}
button svg path, .button svg path, input[type=button] svg path, input[type=color] svg path, input[type=date] svg path, input[type=datetime-local] svg path, input[type=month] svg path, input[type=reset] svg path, input[type=submit] svg path, input[type=time] svg path, input[type=week] svg path {
  color: inherit;
}
button svg use, .button svg use, input[type=button] svg use, input[type=color] svg use, input[type=date] svg use, input[type=datetime-local] svg use, input[type=month] svg use, input[type=reset] svg use, input[type=submit] svg use, input[type=time] svg use, input[type=week] svg use {
  color: inherit;
}
button svg:first-child, .button svg:first-child, input[type=button] svg:first-child, input[type=color] svg:first-child, input[type=date] svg:first-child, input[type=datetime-local] svg:first-child, input[type=month] svg:first-child, input[type=reset] svg:first-child, input[type=submit] svg:first-child, input[type=time] svg:first-child, input[type=week] svg:first-child {
  margin-right: var(--distance-075);
}
button svg:last-child, .button svg:last-child, input[type=button] svg:last-child, input[type=color] svg:last-child, input[type=date] svg:last-child, input[type=datetime-local] svg:last-child, input[type=month] svg:last-child, input[type=reset] svg:last-child, input[type=submit] svg:last-child, input[type=time] svg:last-child, input[type=week] svg:last-child {
  margin-right: 0;
  margin-left: var(--distance-075);
}
button span, .button span, input[type=button] span, input[type=color] span, input[type=date] span, input[type=datetime-local] span, input[type=month] span, input[type=reset] span, input[type=submit] span, input[type=time] span, input[type=week] span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-decoration: inherit;
  text-transform: inherit;
  line-height: inherit;
}

input[type=color] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  display: block;
  width: 80px;
  height: 40px;
  padding: var(--distance-025) var(--distance-05);
}

input[type=file] {
  margin: var(--distance-05);
}
input[type=file]::-webkit-file-upload-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  z-index: 1;
  display: inline-block;
  width: auto;
  height: auto;
  margin-right: var(--distance-1);
  padding: var(--distance-075) var(--distance-2);
  background-image: -moz-linear-gradient(45deg, var(--color-greyscale-7) 20%, var(--color-greyscale-8) 50%, var(--color-greyscale-9) 80%);
  background-image: -webkit-linear-gradient(45deg, var(--color-greyscale-7) 20%, var(--color-greyscale-8) 50%, var(--color-greyscale-9) 80%);
  background-image: linear-gradient(45deg, var(--color-greyscale-7) 20%, var(--color-greyscale-8) 50%, var(--color-greyscale-9) 80%);
  background-size: 200% 100%;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  border-radius: var(--border-radius);
  border-width: var(--control-border-width);
  border-style: var(--control-border-style);
  border-color: var(--color-greyscale-9);
  font-size: var(--font-size-s);
  font-weight: 700;
  color: var(--color-greyscale-1);
  line-height: var(--line-height-s);
  text-align: center;
  text-decoration: var(--control-text-decoration);
  text-transform: var(--control-text-transform);
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: var(--control-transition);
  -moz-transition: var(--control-transition);
  -ms-transition: var(--control-transition);
  -o-transition: var(--control-transition);
  transition: var(--control-transition);
}
input[type=file]::-webkit-file-upload-button:hover, input[type=file]::-webkit-file-upload-button:focus, input[type=file]::-webkit-file-upload-button:active, input[type=file]::-webkit-file-upload-button:visited {
  color: var(--color-greyscale-0);
  background-position: 10% 50%;
  border-color: var(--color-greyscale-8);
}

@media (prefers-color-scheme: light) {
  :root input, :root input::-webkit-calendar-picker-indicator {
    color-scheme: light;
  }
}
:root body.light input, :root body.light input::-webkit-calendar-picker-indicator {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root input, :root input::-webkit-calendar-picker-indicator {
    color-scheme: dark;
  }
}
:root body.dark input, :root body.dark input::-webkit-calendar-picker-indicator {
  color-scheme: dark;
}

/*# sourceMappingURL=buttons.css.map */