form.css

/* label */
label {
  padding: 0;
  color: rgb(var(--form-label));
  margin-bottom: 0;
  font-size: 1em;
  display: block;
}

label:not(:only-child):not(:last-child) {
  padding-bottom: 0.5em;
}

label.disabled {
  color: rgb(var(--form-label-disabled));
}

/* select */
select {
  background-color: rgb(var(--form-input-background));
  background-image:
    linear-gradient(45deg, transparent 60%, rgb(var(--form-label)) 60%),
    linear-gradient(135deg, rgb(var(--form-label)) 40%, transparent 40%);
  background-position:
    calc(100% - 1.5em) 55%,
    calc(100% - 1em) 55%;
  background-size:
    0.5em 0.375em,
    0.5em 0.375em;
  background-repeat: no-repeat;
  padding: 0 3em 0 1em;
  margin: 0 0 1em 0;
  color: rgb(var(--form-label));
  font-size: 1em;
  font-family: var(--font-regular);
  line-height: 2;
  min-height: 2.5em;
  min-width: 0;
  width: 100%;
  border-color: rgb(var(--form-input-border));
  border-width: var(--theme-line-width);
  border-style: solid;
  border-radius: var(--theme-radius);
  cursor: pointer;
  transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

select:hover {
  background-image:
    linear-gradient(45deg, transparent 60%, rgb(var(--form-label-hover)) 60%),
    linear-gradient(135deg, rgb(var(--form-label-hover)) 40%, transparent 40%);
  background-color: rgb(var(--form-input-background-hover));
  border-color: rgb(var(--form-input-border-hover));
  color: rgb(var(--form-label-hover));
  outline: none;
  box-shadow: var(--form-ring-hover);
}

select:focus,
select:active {
  background-image:
    linear-gradient(45deg, transparent 60%, rgb(var(--form-label-focus-active)) 60%),
    linear-gradient(135deg, rgb(var(--form-label-focus-active)) 40%, transparent 40%);
  background-color: rgb(var(--form-input-background-border-focus-active));
  border-color: rgb(var(--form-input-border-focus-active));
  color: rgb(var(--form-label-focus-active));
  outline: none;
  z-index: 2;
  box-shadow: var(--form-ring-accent);
}

select:disabled,
select:disabled:hover,
select:disabled:focus,
select:disabled:active {
  background-color: rgb(var(--form-input-background-disabled));
  background-image:
    linear-gradient(45deg, transparent 50%, rgb(var(--form-input-text-disabled)) 50%),
    linear-gradient(135deg, rgb(var(--form-input-text-disabled)) 50%, transparent 50%);
  border-color: rgb(var(--form-input-border-disabled));
  color: rgb(var(--form-input-text-disabled));
  cursor: default;
  box-shadow: none;
}

/* textarea */
textarea {
  background-color: rgb(var(--form-input-background));
  padding: 0.25em 1em;
  margin: 0 0 1em 0;
  color: rgb(var(--form-input-text));
  font-size: 1em;
  line-height: 1.6;
  font-family: var(--font-regular);
  height: 10em;
  min-height: 2.5em;
  min-width: 0;
  width: 100%;
  border-color: rgb(var(--form-input-border));
  border-width: var(--theme-line-width);
  border-style: solid;
  border-radius: var(--theme-radius);
  cursor: text;
  resize: vertical;
  display: block;
  transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
  -moz-appearance: textfield;
}

textarea:hover {
  background-color: rgb(var(--form-input-background-hover));
  border-color: rgb(var(--form-input-border-hover));
  color: rgb(var(--form-input-text-hover));
  outline: none;
  box-shadow: var(--form-ring-hover);
}

textarea:focus,
textarea:active {
  background-color: rgb(var(--form-input-background-focus-active));
  border-color: rgb(var(--form-input-border-focus-active));
  color: rgb(var(--form-input-text-focus-active));
  outline: none;
  box-shadow: var(--form-ring-accent);
}

textarea:disabled {
  background-color: rgb(var(--form-input-background-disabled));
  border-color: rgb(var(--form-input-border-disabled));
  color: rgb(var(--form-input-text-disabled));
  cursor: default;
  box-shadow: none;
  resize: none;
}

textarea:disabled:hover,
textarea:disabled:focus {
  color: rgb(var(--form-input-text-disabled));
}

textarea::placeholder {
  color: rgb(var(--form-placeholder));
  transition: color var(--layout-timing-extra-fast);
}

textarea:hover::placeholder {
  color: rgb(var(--form-placeholder-focus-hover));
}

textarea:focus::placeholder {
  color: rgb(var(--form-placeholder-focus-hover));
}

textarea:disabled::placeholder,
textarea:disabled:hover::placeholder,
textarea:disabled:focus::placeholder {
  color: rgb(var(--form-placeholder-disabled));
}

/* email, number, password, search, tel, text */
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"] {
  background-color: rgb(var(--form-input-background));
  padding: 0 1em;
  margin: 0 0 1em 0;
  color: rgb(var(--form-input-text));
  font-size: 1em;
  font-family: var(--font-regular);
  line-height: 1.6em;
  height: 2.5em;
  min-width: 0;
  width: 100%;
  border-color: rgb(var(--form-input-border));
  border-width: var(--theme-line-width);
  border-style: solid;
  border-radius: var(--theme-radius);
  cursor: text;
  transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
  -moz-appearance: textfield;
}

input[type="number"] {
  text-align: center;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="email"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="text"]:hover {
  background-color: rgb(var(--form-input-background-hover));
  border-color: rgb(var(--form-input-border-hover));
  color: rgb(var(--form-input-text-hover));
  outline: none;
  box-shadow: var(--form-ring-hover);
}

input[type="email"]:focus,
input[type="email"]:active,
input[type="number"]:focus,
input[type="number"]:active,
input[type="password"]:focus,
input[type="password"]:active,
input[type="search"]:focus,
input[type="search"]:active,
input[type="tel"]:focus,
input[type="tel"]:active,
input[type="text"]:focus,
input[type="text"]:active {
  background-color: rgb(var(--form-input-background-focus-active));
  border-color: rgb(var(--form-input-border-focus-active));
  color: rgb(var(--form-input-text-focus-active));
  outline: none;
  z-index: 2;
  box-shadow: var(--form-ring-accent);
}

input[type="email"]:disabled,
input[type="number"]:disabled,
input[type="password"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="text"]:disabled {
  background-color: rgb(var(--form-input-background-disabled));
  border-color: rgb(var(--form-input-border-disabled));
  color: rgb(var(--form-input-text-disabled));
  cursor: default;
  box-shadow: none;
}

input[type="email"]:disabled:hover,
input[type="email"]:disabled:focus,
input[type="number"]:disabled:hover,
input[type="number"]:disabled:focus,
input[type="password"]:disabled:hover,
input[type="password"]:disabled:focus,
input[type="search"]:disabled:hover,
input[type="search"]:disabled:focus,
input[type="tel"]:disabled:hover,
input[type="tel"]:disabled:focus,
input[type="text"]:disabled:hover,
input[type="text"]:disabled:focus {
  color: rgb(var(--form-input-text-disabled));
}

input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="text"]::placeholder {
  color: rgb(var(--form-placeholder));
  transition: color var(--layout-timing-extra-fast);
}

input[type="email"]:hover::placeholder,
input[type="number"]:hover::placeholder,
input[type="password"]:hover::placeholder,
input[type="search"]:hover::placeholder,
input[type="tel"]:hover::placeholder,
input[type="text"]:hover::placeholder {
  color: rgb(var(--form-placeholder-focus-hover));
}

input[type="email"]:focus::placeholder,
input[type="number"]:focus::placeholder,
input[type="password"]:focus::placeholder,
input[type="search"]:focus::placeholder,
input[type="tel"]:focus::placeholder,
input[type="text"]:focus::placeholder {
  color: rgb(var(--form-placeholder-focus-hover));
}

input[type="email"]:disabled::placeholder,
input[type="email"]:disabled:hover::placeholder,
input[type="email"]:disabled:focus::placeholder,
input[type="number"]:disabled::placeholder,
input[type="number"]:disabled:hover::placeholder,
input[type="number"]:disabled:focus::placeholder,
input[type="password"]:disabled::placeholder,
input[type="password"]:disabled:hover::placeholder,
input[type="password"]:disabled:focus::placeholder,
input[type="search"]:disabled::placeholder,
input[type="search"]:disabled:hover::placeholder,
input[type="search"]:disabled:focus::placeholder,
input[type="tel"]:disabled::placeholder,
input[type="tel"]:disabled:hover::placeholder,
input[type="tel"]:disabled:focus::placeholder,
input[type="text"]:disabled::placeholder,
input[type="text"]:disabled:hover::placeholder,
input[type="text"]:disabled:focus::placeholder {
  color: rgb(var(--form-placeholder-disabled));
}

/* checkbox and radio */
input[type="checkbox"],
input[type="radio"] {
  margin-bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  display: block;
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
  pointer-events: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: color var(--layout-timing-extra-fast);
}

input[type="checkbox"]+label,
input[type="radio"]+label {
  padding: 0;
  margin: 0;
  font-size: 1em;
  font-family: var(--font-regular);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  transition: transform var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
}

input[type="checkbox"]:hover+label,
input[type="checkbox"]:focus+label,
input[type="radio"]:hover+label,
input[type="radio"]:focus+label {
  color: rgb(var(--form-label-hover));
}

input[type="checkbox"]:active+label,
input[type="radio"]:active+label {
  color: rgb(var(--form-label-focus-active));
}

input[type="checkbox"]:checked+label,
input[type="radio"]:checked+label {
  color: rgb(var(--form-label-checked));
}

input[type="checkbox"]:disabled+label,
input[type="checkbox"]:disabled:hover+label,
input[type="checkbox"]:disabled:focus+label,
input[type="radio"]:disabled+label,
input[type="radio"]:disabled:hover+label,
input[type="radio"]:disabled:focus+label {
  color: rgb(var(--form-label-disabled));
  cursor: default;
}

input[type="checkbox"]+label .label-icon,
input[type="radio"]+label .label-icon {
  background-color: rgb(var(--form-icon));
  margin-right: 1em;
  width: var(--form-thumb-size);
  height: var(--form-thumb-size);
  position: relative;
  top: 0.125em;
  display: block;
  flex-grow: 0;
  flex-shrink: 0;
  z-index: 1;
  box-shadow: none;
  transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
}

input[type="checkbox"]+label .label-icon {
  border-radius: 0.25em;
}

input[type="radio"]+label .label-icon {
  border-radius: 50%;
}

input[type="checkbox"]:hover+label .label-icon,
input[type="checkbox"]:focus+label .label-icon,
input[type="radio"]:hover+label .label-icon,
input[type="radio"]:focus+label .label-icon {
  background-color: rgb(var(--form-icon-hover));
  box-shadow: var(--form-ring-hover);
}

input[type="checkbox"]:active+label .label-icon,
input[type="radio"]:active+label .label-icon {
  background-color: rgb(var(--form-icon-active));
  box-shadow: var(--form-ring-accent);
  transition: none;
}

input[type="checkbox"]:checked+label .label-icon,
input[type="radio"]:checked+label .label-icon {
  background-color: rgb(var(--form-icon-checked));
}

input[type="checkbox"]:checked:focus+label .label-icon,
input[type="checkbox"]:checked:active+label .label-icon,
input[type="radio"]:checked:focus+label .label-icon,
input[type="radio"]:checked:active+label .label-icon {
  box-shadow: var(--form-ring-accent);
}

input[type="checkbox"]:disabled+label .label-icon,
input[type="checkbox"]:disabled:hover+label .label-icon,
input[type="checkbox"]:disabled:focus+label .label-icon,
input[type="checkbox"]:checked:disabled+label .label-icon,
input[type="checkbox"]:checked:disabled:hover+label .label-icon,
input[type="checkbox"]:checked:disabled:focus+label .label-icon,
input[type="radio"]:disabled+label .label-icon,
input[type="radio"]:disabled:hover+label .label-icon,
input[type="radio"]:disabled:focus+label .label-icon,
input[type="radio"]:checked:disabled+label .label-icon,
input[type="radio"]:checked:disabled:hover+label .label-icon,
input[type="radio"]:checked:disabled:focus+label .label-icon {
  background-color: rgb(var(--form-icon-disabled));
  box-shadow: none;
}

input[type="checkbox"]+label .label-icon:before,
input[type="radio"]+label .label-icon:before {
  content: "";
  background-color: rgb(var(--form-icon-symbol));
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0.7);
  transform-origin: center;
  z-index: 2;
  transition: background-color var(--layout-timing-extra-fast), border-radius var(--layout-timing-extra-fast), transform var(--layout-timing-extra-fast);
}

input[type="checkbox"]+label .label-icon:before {
  border-radius: 0.1em;
}

input[type="radio"]+label .label-icon:before {
  border-radius: 50%;
}

input[type="checkbox"]:active+label .label-icon:before,
input[type="radio"]:active+label .label-icon:before {
  background-color: rgb(var(--form-icon-symbol-active));
  transition: none;
}

input[type="checkbox"]:checked+label .label-icon:before,
input[type="radio"]:checked+label .label-icon:before {
  background-color: rgb(var(--form-icon-symbol-active));
  border-radius: 50%;
}

input[type="checkbox"]:checked+label .label-icon:before {
  transform: scale(0);
}

input[type="radio"]:checked+label .label-icon:before {
  transform: scale(0.2);
}

input[type="checkbox"]:disabled+label .label-icon:before,
input[type="checkbox"]:disabled:hover+label .label-icon:before,
input[type="checkbox"]:disabled:focus+label .label-icon:before,
input[type="checkbox"]:disabled:active+label .label-icon:before,
input[type="checkbox"]:checked:disabled+label .label-icon:before,
input[type="checkbox"]:checked:disabled:hover+label .label-icon:before,
input[type="checkbox"]:checked:disabled:focus+label .label-icon:before,
input[type="checkbox"]:checked:disabled:active+label .label-icon:before,
input[type="radio"]:disabled+label .label-icon:before,
input[type="radio"]:disabled:hover+label .label-icon:before,
input[type="radio"]:disabled:focus+label .label-icon:before,
input[type="radio"]:disabled:active+label .label-icon:before,
input[type="radio"]:checked:disabled+label .label-icon:before,
input[type="radio"]:checked:disabled:hover+label .label-icon:before,
input[type="radio"]:checked:disabled:focus+label .label-icon:before,
input[type="radio"]:checked:disabled:active+label .label-icon:before {
  background-color: rgb(var(--form-icon-symbol-disabled));
}

input[type="checkbox"]+label .label-icon:after {
  content: "";
  background-color: rgb(var(--form-icon-symbol));
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0);
  transform-origin: center;
  z-index: 2;
  transition: transform var(--layout-timing-extra-fast);
  clip-path: polygon(7% 56%, 37% 86%, 95% 27%, 84% 16%, 37% 64%, 18% 45%);
}

input[type="checkbox"]:checked+label .label-icon:after {
  background-color: rgb(var(--form-icon-symbol-active));
  transform: scale(0.8);
}

input[type="checkbox"]:disabled+label .label-icon:after,
input[type="checkbox"]:disabled:hover+label .label-icon:after,
input[type="checkbox"]:disabled:focus+label .label-icon:after,
input[type="checkbox"]:disabled:active+label .label-icon:after,
input[type="checkbox"]:checked:disabled+label .label-icon:after,
input[type="checkbox"]:checked:disabled:hover+label .label-icon:after,
input[type="checkbox"]:checked:disabled:focus+label .label-icon:after,
input[type="checkbox"]:checked:disabled:active+label .label-icon:after {
  background-color: rgb(var(--form-icon-symbol-disabled));
}

/* color */
input[type="color"] {
  background-color: transparent;
  padding: 0;
  margin: 0 0 1em 0;
  width: 100%;
  min-width: 3em;
  height: 2.5em;
  display: block;
  border: 0;
  border-radius: var(--theme-radius);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--layout-timing-extra-fast);
}

input[type="color"]:hover {
  outline: none;
  box-shadow: var(--form-ring-hover);
}

input[type="color"]:focus {
  outline: none;
  box-shadow: var(--form-ring-focus);
}

input[type="color"]:disabled {
  opacity: 0.25;
  cursor: default;
}

input[type="color"]:disabled:hover,
input[type="color"]:disabled:focus {
  box-shadow: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  border: 0;
  padding: 0;
  outline: none;
}

input[type="color"]::-webkit-color-swatch {
  border: 0;
  padding: 0;
  outline: none;
}

input[type="color"]::-moz-color-swatch-wrapper {
  border: 0;
  padding: 0;
  outline: none;
}

input[type="color"]::-moz-color-swatch {
  border: 0;
  padding: 0;
  outline: none;
}

input[type="color"]::-moz-focus-inner {
  border: 0;
  padding: 0;
  outline: none;
}

/* range */
input[type="range"] {
  background-color: transparent;
  padding: 0;
  margin: 0;
  color: rgb(var(--theme-style-text));
  font-size: 1em;
  font-family: var(--font-regular);
  display: block;
  height: 2.5em;
  width: 100%;
  border: 0;
  border-radius: var(--theme-radius);
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-appearance: none;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]:disabled {
  cursor: default;
}

input[type="range"]:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background-color: rgb(var(--form-range-track-background));
  height: var(--layout-line-width);
  width: 100%;
  border: 0;
  border-radius: var(--theme-radius);
  transform: translate(0, -50%);
  transition: background-color var(--layout-timing-extra-fast);
}

input[type="range"]:focus:before,
input[type="range"]:hover:before {
  background-color: rgb(var(--form-range-track-background-focus-hover));
}

input[type="range"]:active:before {
  background-color: rgb(var(--form-range-track-background-active));
}

input[type="range"]:disabled:before {
  background-color: rgb(var(--form-range-track-background-disabled));
  cursor: default;
}

input[type="range"]::-webkit-slider-runnable-track {
  background-color: transparent;
  margin: 0 -0.5em;
  padding: 0;
  border: 0;
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
  background-color: rgb(var(--form-range-thumb-background));
  margin: 0;
  padding: 0;
  border-width: 0;
  border-radius: 50%;
  position: relative;
  height: var(--form-thumb-size);
  width: var(--form-thumb-size);
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb,
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:active::-webkit-slider-thumb {
  box-shadow: none;
  text-decoration: none;
  outline: none;
}

input[type="range"]:hover::-webkit-slider-thumb {
  background-color: rgb(var(--form-range-thumb-background-hover));
  box-shadow: var(--form-ring-hover);
  outline: none;
}

input[type="range"]:focus::-webkit-slider-thumb {
  background-color: rgb(var(--form-range-thumb-background-focus));
  box-shadow: var(--form-ring-accent);
}

input[type="range"]:active::-webkit-slider-thumb {
  background-color: rgb(var(--form-range-thumb-background-active));
  box-shadow: var(--form-ring-accent);
}

input[type="range"]:disabled::-webkit-slider-thumb {
  background-color: rgb(var(--form-range-thumb-background-disabled));
  cursor: default;
}

input[type="range"]:disabled:hover::-webkit-slider-thumb,
input[type="range"]:disabled:focus::-webkit-slider-thumb {
  background-color: rgb(var(--form-range-thumb-background-disabled));
  box-shadow: none;
  transform: scale(1);
  outline: none;
}

input[type="range"]:disabled:active::-webkit-slider-thumb {
  background-color: rgb(var(--form-range-thumb-background-disabled));
  box-shadow: none;
  outline: none;
}

input[type="range"]::-moz-range-track {
  background-color: rgb(var(--form-range-track-background));
  margin: 0 -0.5em;
  padding: 0;
  height: var(--layout-line-width);
  width: 100%;
  border: 0;
  border-radius: var(--theme-radius);
  transition: all var(--layout-timing-extra-fast);
  -webkit-appearance: none;
}

input[type="range"]:focus::-moz-range-track,
input[type="range"]:hover::-moz-range-track {
  background-color: rgb(var(--form-range-track-background-focus-hover));
}

input[type="range"]:active::-moz-range-track {
  background-color: rgb(var(--form-range-track-background-active));
}

input[type="range"]:disabled::-moz-range-track {
  background-color: rgb(var(--form-range-track-background-disabled));
  cursor: default;
}

input[type="range"]::-moz-focus-outer {
  border: 0;
}

input[type="range"]::-moz-range-thumb {
  background-color: rgb(var(--form-range-thumb-background));
  margin: 0;
  padding: 0;
  border-width: 0;
  border-radius: 50%;
  position: relative;
  height: var(--form-thumb-size);
  width: var(--form-thumb-size);
  cursor: pointer;
  box-sizing: border-box;
  transition: background-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
  -moz-appearance: none;
}

input[type="range"]::-moz-range-thumb,
input[type="range"]:focus::-moz-range-thumb,
input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:active::-moz-range-thumb {
  box-shadow: none;
  text-decoration: none;
  outline: none;
}

input[type="range"]:hover::-moz-range-thumb {
  background-color: rgb(var(--form-range-thumb-background-hover));
  box-shadow: var(--form-ring-hover);
  outline: none;
}

input[type="range"]:focus::-moz-range-thumb {
  background-color: rgb(var(--form-range-thumb-background-focus));
  box-shadow: var(--form-ring-accent);
}

input[type="range"]:active::-moz-range-thumb {
  background-color: rgb(var(--form-range-thumb-background-active));
  box-shadow: var(--form-ring-accent);
}

input[type="range"]:disabled::-moz-range-thumb {
  background-color: rgb(var(--form-range-thumb-background-disabled));
  cursor: default;
}

input[type="range"]:disabled:hover::-moz-range-thumb,
input[type="range"]:disabled:focus::-moz-range-thumb {
  background-color: rgb(var(--form-range-thumb-background-disabled));
  box-shadow: none;
  transform: scale(1);
  outline: none;
}

input[type="range"]:disabled:active::-moz-range-thumb {
  background-color: rgb(var(--form-range-thumb-background-disabled));
  box-shadow: none;
  outline: none;
}

input[type="range"]::-moz-range-progress {
  background-color: rgb(var(--form-range-progress-background));
  height: calc(var(--layout-line-width) * 2);
  border-radius: var(--theme-radius);
  transition: background-color var(--layout-timing-extra-fast);
}

input[type="range"]:active::-moz-range-progress {
  background-color: rgb(var(--form-range-progress-background-active));
}

input[type="range"]:disabled::-moz-range-progress {
  background-color: rgb(var(--form-range-progress-background-disabled));
}

/* form helper */
.form-helper {
  padding: 0.5em 0;
  color: rgb(var(--form-helper));
  transition: color var(--layout-timing-extra-fast);
}

.form-helper.disabled {
  color: rgb(var(--form-helper-disabled));
}

.form-helper:not(:last-child) {
  margin-bottom: 0;
}

/* input variants */
.input-wrap {
  padding: 0.5em 0;
  position: relative;
  width: 100%;
  display: block;
}

.input-button-inline {
  width: initial;
  display: inline-block;
}

.input-button input[type="checkbox"]+label,
.input-button input[type="radio"]+label,
.input-button input[type="color"]+label,
.input-button input[type="file"]+label {
  background-color: rgb(var(--button-background));
  padding: 0.25em 1em;
  margin: 0;
  color: rgb(var(--button-text));
  font-size: 1em;
  font-family: var(--font-regular);
  min-height: 2.5em;
  line-height: 1;
  border: 0;
  border-radius: var(--theme-radius);
  position: relative;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-shadow: none;
  transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
}

.input-button input[type="checkbox"]:focus+label,
.input-button input[type="checkbox"]:hover+label,
.input-button input[type="radio"]:focus+label,
.input-button input[type="radio"]:hover+label,
.input-button input[type="color"]:focus+label,
.input-button input[type="color"]:hover+label,
.input-button input[type="file"]:focus+label,
.input-button input[type="file"]:hover+label {
  background-color: rgb(var(--button-background-focus-hover));
  color: rgb(var(--button-text-focus-hover));
  outline: none;
  text-decoration: none;
}

.input-button input[type="checkbox"]:active+label,
.input-button input[type="radio"]:active+label,
.input-button input[type="color"]:active+label,
.input-button input[type="file"]:active+label {
  background-color: rgb(var(--button-background-active));
  color: rgb(var(--button-text-active));
  outline: none;
  text-decoration: none;
  transition: none;
}

.input-button input[type="checkbox"]:checked+label,
.input-button input[type="radio"]:checked+label,
.input-button input[type="color"]:checked+label,
.input-button input[type="file"]:checked+label {
  background-color: rgb(var(--button-background-active));
  color: rgb(var(--button-text-active));
  outline: none;
  text-decoration: none;
  transition: none;
}

.input-button input[type="checkbox"]:disabled+label,
.input-button input[type="checkbox"]:disabled:hover+label,
.input-button input[type="checkbox"]:disabled:focus+label,
.input-button input[type="checkbox"]:disabled:active+label,
.input-button input[type="radio"]:disabled+label,
.input-button input[type="radio"]:disabled:hover+label,
.input-button input[type="radio"]:disabled:focus+label,
.input-button input[type="radio"]:disabled:active+label,
.input-button input[type="color"]:disabled+label,
.input-button input[type="color"]:disabled:hover+label,
.input-button input[type="color"]:disabled:focus+label,
.input-button input[type="color"]:disabled:active+label,
.input-button input[type="file"]:disabled+label,
.input-button input[type="file"]:disabled:hover+label,
.input-button input[type="file"]:disabled:focus+label,
.input-button input[type="file"]:disabled:active+label {
  background-color: rgb(var(--button-background-disabled));
  color: rgb(var(--button-text-disabled));
  cursor: default;
  text-decoration: none;
}

.input-button input[type="checkbox"]+label .label-icon,
.input-button input[type="radio"]+label .label-icon {
  top: inherit;
}

.input-button input[type="checkbox"]+label:after,
.input-button input[type="radio"]+label:after,
.input-button input[type="color"]+label:after,
.input-button input[type="file"]+label:after {
  background: rgb(var(--button-border));
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--layout-line-width);
  transition: background-color var(--layout-timing-extra-fast);
}

.input-button input[type="checkbox"]:focus+label:after,
.input-button input[type="checkbox"]:hover+label:after,
.input-button input[type="radio"]:focus+label:after,
.input-button input[type="radio"]:hover+label:after,
.input-button input[type="color"]:focus+label:after,
.input-button input[type="color"]:hover+label:after,
.input-button input[type="file"]:focus+label:after,
.input-button input[type="file"]:hover+label:after {
  background-color: rgb(var(--button-border-focus-hover));
}

.input-button input[type="checkbox"]:active+label:after,
.input-button input[type="radio"]:active+label:after,
.input-button input[type="color"]:active+label:after,
.input-button input[type="file"]:active+label:after {
  background-color: rgb(var(--button-border-active));
  transition: none;
}

.input-button input[type="checkbox"]:checked+label:after,
.input-button input[type="radio"]:checked+label:after,
.input-button input[type="color"]:checked+label:after,
.input-button input[type="file"]:checked+label:after {
  background-color: rgb(var(--button-border-active));
  transition: none;
}

.input-button input[type="checkbox"]:disabled+label:after,
.input-button input[type="checkbox"]:disabled:hover+label:after,
.input-button input[type="checkbox"]:disabled:focus+label:after,
.input-button input[type="checkbox"]:disabled:active+label:after,
.input-button input[type="radio"]:disabled+label:after,
.input-button input[type="radio"]:disabled:hover+label:after,
.input-button input[type="radio"]:disabled:focus+label:after,
.input-button input[type="radio"]:disabled:active+label:after,
.input-button input[type="color"]:disabled+label:after,
.input-button input[type="color"]:disabled:hover+label:after,
.input-button input[type="color"]:disabled:focus+label:after,
.input-button input[type="color"]:disabled:active+label:after,
.input-button input[type="file"]:disabled+label:after,
.input-button input[type="file"]:disabled:hover+label:after,
.input-button input[type="file"]:disabled:focus+label:after,
.input-button input[type="file"]:disabled:active+label:after {
  background-color: rgb(var(--button-border-disabled));
}

.input-button-link input[type="checkbox"]+label,
.input-button-link input[type="radio"]+label,
.input-button-link input[type="color"]+label,
.input-button-link input[type="file"]+label {
  background-color: transparent;
}

.input-button-link input[type="checkbox"]:hover+label,
.input-button-link input[type="checkbox"]:focus+label,
.input-button-link input[type="checkbox"]:checked+label,
.input-button-link input[type="radio"]:hover+label,
.input-button-link input[type="radio"]:focus+label,
.input-button-link input[type="radio"]:checked+label,
.input-button-link input[type="color"]:hover+label,
.input-button-link input[type="color"]:focus+label,
.input-button-link input[type="color"]:checked+label,
.input-button-link input[type="file"]:hover+label,
.input-button-link input[type="file"]:focus+label,
.input-button-link input[type="file"]:checked+label {
  background-color: transparent;
}

.input-button-link input[type="checkbox"]:active+label,
.input-button-link input[type="radio"]:active+label,
.input-button-link input[type="color"]:active+label,
.input-button-link input[type="file"]:active+label {
  background-color: transparent;
}

.input-button-link input:disabled[type="checkbox"]+label,
.input-button-link input:disabled[type="radio"]+label,
.input-button-link input:disabled[type="color"]+label,
.input-button-link input:disabled[type="file"]+label {
  background-color: transparent;
  color: transparent;
  pointer-events: none;
}

.input-button-link input:disabled[type="checkbox"]:hover+label,
.input-button-link input:disabled[type="checkbox"]:focus+label,
.input-button-link input:disabled[type="radio"]:hover+label,
.input-button-link input:disabled[type="radio"]:focus+label,
.input-button-link input:disabled[type="color"]:hover+label,
.input-button-link input:disabled[type="color"]:focus+label,
.input-button-link input:disabled[type="file"]:hover+label,
.input-button-link input:disabled[type="file"]:focus+label {
  background-color: transparent;
}

.input-button-link input[type="checkbox"]+label:after,
.input-button-link input[type="radio"]+label:after,
.input-button-link input[type="color"]+label:after,
.input-button-link input[type="file"]+label:after {
  content: none;
}

.input-color-dot input[type="color"] {
  margin: 0;
  position: absolute;
  top: 50%;
  right: 1em;
  width: calc(var(--form-thumb-size) * 0.8);
  height: calc(var(--form-thumb-size) * 0.8);
  min-width: inherit;
  z-index: 1;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: none;
}

.input-color-dot input[type="color"]:hover {
  outline: none;
  box-shadow: none;
}

.input-color-dot input[type="color"]:focus {
  outline: none;
  box-shadow: none;
}

.input-color-dot-accent input[type="color"],
.input-color-dot-accent input[type="color"]:hover,
.input-color-dot-accent input[type="color"]:focus {
  box-shadow: 0 0 0.25em 0 rgba(var(--theme-accent), 0.6), 0 0 0.5em 0 rgba(var(--theme-accent), 0.4);
}

.input-color-dot input[type="color"]+label {
  padding-right: calc(calc(var(--form-thumb-size) * 0.8) + 2em);
  position: relative;
}

.input-hide input[type="checkbox"]+label .label-icon,
.input-hide input[type="checkbox"]:checked+label .label-icon,
.input-hide input[type="radio"]+label .label-icon,
.input-hide input[type="radio"]:checked+label .label-icon,
.input-hide input[type="file"]+label .label-icon,
.input-hide input[type="file"]:checked+label .label-icon {
  display: none;
}

.input-hide input[type="color"],
.input-hide input[type="file"] {
  opacity: 0;
  width: 1px;
  height: 1px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-appearance: none;
}

/* form variants */
.form-grid-wrap {
  padding: 0.5em 0;
  position: relative;
  width: 100%;
}

.form-grid {
  background-color: rgb(var(--form-grid-background));
  padding: calc(var(--form-thumb-size) / 2);
  display: inline-grid;
  overflow: hidden;
  transition: background-color var(--layout-timing-extra-fast);
}

.form-grid:hover {
  outline: none;
  background-color: rgb(var(--form-grid-background-hover));
}

.form-grid:focus,
.form-grid:focus-within {
  outline: none;
  background-color: rgb(var(--form-grid-background-focus));
}

.form-grid.disabled,
.form-grid.disabled:focus,
.form-grid.disabled:focus-within {
  background-color: rgb(var(--form-grid-background-disabled));
}

.form-grid-3x3 {
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border-radius: var(--theme-radius);
}

.form-grid-3x1 {
  grid-template-columns: repeat(3, 1fr);
  border-radius: var(--theme-radius);
}

.form-grid .input-wrap {
  padding: 0;
}

.form-grid input[type="checkbox"]+label,
.form-grid input[type="radio"]+label {
  background-color: transparent;
  padding: 0;
  margin: 0;
  display: block;
  width: calc(var(--form-thumb-size) * 1.75);
  height: calc(var(--form-thumb-size) * 1.75);
  position: relative;
  transition: none;
  z-index: 1;
}

.form-grid input[type="checkbox"]:hover+label,
.form-grid input[type="checkbox"]:focus+label,
.form-grid input[type="radio"]:hover+label,
.form-grid input[type="radio"]:focus+label {
  box-shadow: none;
}

.form-grid input[type="checkbox"]+label .label-icon,
.form-grid input[type="radio"]+label .label-icon {
  margin-right: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.form-indent {
  margin-left: 2.25em;
}

.form-inline {
  display: inline-block;
  margin-right: 0.5em;
  width: initial;
}

.form-group-text {
  background-color: rgb(var(--form-group-text-background));
  padding: 0 1em;
  margin: 0;
  color: rgb(var(--form-input-text));
  min-width: 4em;
  font-size: 1em;
  font-family: var(--font-regular);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-width: var(--layout-line-width);
  border-color: rgb(var(--form-group-text-border));
  border-style: solid;
  border-radius: var(--theme-radius);
  white-space: nowrap;
  transition: background-color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast);
}

.form-group-text:hover,
.form-group-text:focus {
  background-color: rgb(var(--form-group-text-background-focus-hover));
  border-color: rgb(var(--form-group-text-border-focus-hover));
  color: rgb(var(--form-input-text-hover));
  outline: none;
}

.form-group-text:active {
  background-color: rgb(var(--form-group-text-background-active));
  border-color: rgb(var(--form-group-text-border-active));
  color: rgb(var(--form-input-text-hover));
  outline: none;
}

.form-group-text.disabled,
.form-group-text.disabled:hover,
.form-group-text.disabled:focus,
.form-group-text.disable:active {
  background-color: rgb(var(--form-group-text-background-disabled));
  border-color: rgb(var(--form-group-text-border-disabled));
  color: rgb(var(--form-input-text-disabled));
  box-shadow: none;
  cursor: default;
}

.form-group-small,
.form-group-medium,
.form-group-large {
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.form-group-small {
  width: 3em;
}

.form-group-medium {
  width: 6em;
}

.form-group-large {
  width: 9em;
}

.form-group {
  margin: 0 0 1em 0;
  display: inline-flex;
  justify-content: flex-start;
  align-items: stretch;
}

.form-group-block {
  display: flex;
  width: 100%;
}

.form-group-item-shrink {
  flex-grow: 0;
}

.form-group-item-grow {
  flex-grow: 1;
}

.form-group-item-half {
  flex-basis: 50%;
}

.form-group .form-group-text,
.form-group .button,
.form-group>select,
.form-group>input[type="email"],
.form-group>input[type="number"],
.form-group>input[type="password"],
.form-group>input[type="search"],
.form-group>input[type="tel"],
.form-group>input[type="text"],
.form-group>input[type="color"],
.form-group>input[type="range"] {
  margin: 0;
  border-radius: 0;
  height: inherit;
  min-height: 2.5em;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  z-index: 1;
}

.form-group .button:after {
  border-radius: 0;
}

.form-group .form-group-text {
  flex-shrink: 0;
}

.form-group .form-group-text:focus,
.form-group .button:focus,
.form-group>select:focus,
.form-group>input[type="email"]:focus,
.form-group>input[type="number"]:focus,
.form-group>input[type="password"]:focus,
.form-group>input[type="search"]:focus,
.form-group>input[type="tel"]:focus,
.form-group>input[type="text"]:focus,
.form-group>input[type="color"]:focus,
.form-group>input[type="range"]:focus {
  z-index: 2;
}

.form-group .form-group-text:hover,
.form-group .button:hover,
.form-group>select:hover,
.form-group>input[type="email"]:hover,
.form-group>input[type="number"]:hover,
.form-group>input[type="password"]:hover,
.form-group>input[type="search"]:hover,
.form-group>input[type="tel"]:hover,
.form-group>input[type="text"]:hover,
.form-group>input[type="color"]:hover,
.form-group>input[type="range"]:hover {
  z-index: 3;
}

.form-group .form-group-text:first-child,
.form-group .button:first-child,
.form-group .button:first-child:after,
.form-group>select:first-child,
.form-group>input[type="email"]:first-child,
.form-group>input[type="number"]:first-child,
.form-group>input[type="password"]:first-child,
.form-group>input[type="search"]:first-child,
.form-group>input[type="tel"]:first-child,
.form-group>input[type="text"]:first-child,
.form-group>input[type="color"]:first-child,
.form-group>input[type="range"]:first-child {
  border-radius: var(--theme-radius) 0 0 var(--theme-radius);
}

.form-group .form-group-text:last-child,
.form-group .button:last-child,
.form-group .button:last-child:after,
.form-group>select:last-child,
.form-group>input[type="email"]:last-child,
.form-group>input[type="number"]:last-child,
.form-group>input[type="password"]:last-child,
.form-group>input[type="search"]:last-child,
.form-group>input[type="tel"]:last-child,
.form-group>input[type="text"]:last-child,
.form-group>input[type="color"]:last-child,
.form-group>input[type="range"]:last-child {
  border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
}

.form-group.nested-button * .button,
.form-group.nested-button * input[type="checkbox"]+label,
.form-group.nested-button * input[type="radio"]+label,
.form-group.nested-button * input[type="color"]+label {
  border-radius: 0;
}

.form-group.nested-button *:first-child .button,
.form-group.nested-button *:first-child .button:after,
.form-group.nested-button *:first-child input[type="checkbox"]+label,
.form-group.nested-button *:first-child input[type="radio"]+label,
.form-group.nested-button *:first-child input[type="color"]+label {
  border-radius: var(--theme-radius) 0 0 var(--theme-radius);
}

.form-group.nested-button *:last-child .button,
.form-group.nested-button *:last-child .button:after,
.form-group.nested-button *:last-child input[type="checkbox"]+label,
.form-group.nested-button *:last-child input[type="radio"]+label,
.form-group.nested-button *:last-child input[type="color"]+label {
  border-radius: 0 var(--theme-radius) var(--theme-radius) 0;
}

.form-group .form-group-radius-left.form-group-text,
.form-group .form-group-radius-left.button,
.form-group>select.form-group-radius-left,
.form-group>input.form-group-radius-left[type="email"],
.form-group>input.form-group-radius-left[type="number"],
.form-group>input.form-group-radius-left[type="password"],
.form-group>input.form-group-radius-left[type="search"],
.form-group>input.form-group-radius-left[type="tel"],
.form-group>input.form-group-radius-left[type="text"],
.form-group>input.form-group-radius-left[type="color"],
.form-group>input.form-group-radius-left[type="range"] {
  border-top-left-radius: var(--theme-radius);
  border-bottom-left-radius: var(--theme-radius);
}

.form-group .form-group-radius-right.form-group-text,
.form-group .form-group-radius-right.button,
.form-group>select.form-group-radius-right,
.form-group>input.form-group-radius-right[type="email"],
.form-group>input.form-group-radius-right[type="number"],
.form-group>input.form-group-radius-right[type="password"],
.form-group>input.form-group-radius-right[type="search"],
.form-group>input.form-group-radius-right[type="tel"],
.form-group>input.form-group-radius-right[type="text"],
.form-group>input.form-group-radius-right[type="color"],
.form-group>input.form-group-radius-right[type="range"] {
  border-top-right-radius: var(--theme-radius);
  border-bottom-right-radius: var(--theme-radius);
}

.form-dropdown {
  position: relative;
}

.form-dropdown.form-dropdown-inline {
  display: inline-block;
}

.form-dropdown-menu {
  background-color: rgb(var(--form-dropdown-background));
  border-radius: var(--theme-radius);
  padding: 0.5em 0;
  position: absolute;
  width: 100%;
  min-width: 12em;
  box-shadow: var(--layout-shadow-large);
  z-index: var(--z-index-dropdown);
  overflow: hidden;
  display: none;
}

.form-dropdown-menu-left {
  right: 0;
}

.form-dropdown-menu-right {
  left: 0;
}

.form-dropdown-menu-top {
  bottom: calc(100% + calc(var(--layout-line-width) * 2));
}

.form-dropdown-menu-bottom {
  top: calc(100% + calc(var(--layout-line-width) * 2));
}

.form-dropdown-open .form-dropdown-menu {
  display: flex;
  flex-direction: column;
}

.form-dropdown-menu button,
.form-dropdown-menu .button {
  border: 0;
  border-radius: 0;
  margin-bottom: 0;
  justify-content: flex-start;
  position: relative;
  box-shadow: none;
}

.form-dropdown-menu button:after,
.form-dropdown-menu .button:after {
  content: none;
}

.form-group.nested-button .form-dropdown-menu *:first-child .button,
.form-group.nested-button .form-dropdown-menu *:last-child .button,
.form-group.nested-button .form-dropdown-menu *:first-child input[type="checkbox"]+label,
.form-group.nested-button .form-dropdown-menu *:last-child input[type="checkbox"]+label,
.form-group.nested-button .form-dropdown-menu *:first-child input[type="radio"]+label,
.form-group.nested-button .form-dropdown-menu *:last-child input[type="radio"]+label,
.form-group.nested-button .form-dropdown-menu *:first-child input[type="color"]+label,
.form-group.nested-button .form-dropdown-menu *:last-child input[type="color"]+label {
  border-radius: 0;
}

.feedback-wrap {
  padding: 0.5em 0;
  position: relative;
  width: 100%;
}

.form-feedback {
  padding: 0.5em 1.5em 0.5em 1em;
  background-color: rgb(var(--form-feedback-background));
  border-width: 0;
  border-left-width: calc(var(--layout-line-width) * 2);
  border-style: solid;
  border-color: rgb(var(--form-feedback-border));
  border-top-right-radius: var(--theme-radius);
  border-bottom-right-radius: var(--theme-radius);
}

.form-feedback p {
  color: rgb(var(--form-feedback-text));
}

.form-feedback p.muted {
  color: rgb(var(--form-feedback-text-muted));
}

.form-feedback.disabled {
  background-color: rgb(var(--form-feedback-background-disabled));
  border-color: rgb(var(--form-feedback-border-disabled));
}

.form-feedback.disabled p {
  color: rgb(var(--form-feedback-text-disabled));
}