/* 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(--theme-gray-02));
  padding: 0 1em;
  margin: 0 0 1em 0;
  color: rgb(var(--form-input-text));
  font-size: 1em;
  font-family: var(--font-regular);
  line-height: 2.5em;
  height: 2.5em;
  width: 100%;
  border-width: var(--form-input-border);
  border-style: solid;
  border-color: transparent;
  border-radius: var(--theme-radius);
  cursor: text;
  transition: background-color var(--layout-transition-speed-fast) ease-in-out, color var(--layout-transition-speed-fast) ease-in-out, border-color var(--layout-transition-speed-fast) ease-in-out, box-shadow var(--layout-transition-speed-fast) ease-in-out;
  -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(--theme-gray-03));
  color: rgb(var(--form-input-text-hover));
  outline: none;
  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
}

input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus {
  background-color: rgb(var(--theme-gray-01));
  color: rgb(var(--form-input-text-focus));
  outline: none;
  z-index: 2;
  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
}

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: transparent;
  color: rgb(var(--form-input-text-disabled));
  border-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-input-placeholder));
  transition: color var(--layout-transition-speed-fast) ease-in-out;
}

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-input-placeholder-hover-focus));
}

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-input-placeholder-hover-focus));
}

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-input-placeholder-disabled));
}

/* 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));
}

/* checkbox and radio */
input[type="checkbox"],
input[type="radio"] {
  margin-bottom: 0;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  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: all var(--layout-transition-speed-fast) ease-in-out; */
}

input[type="checkbox"]+label,
input[type="radio"]+label {
  color: rgb(var(--form-checkbox-radio-label));
  font-size: 1em;
  font-family: var(--font-regular);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  transition: all var(--layout-transition-speed-fast) ease-in-out;
}

input[type="checkbox"]+label:before,
input[type="radio"]+label:before {
  content: "";
  margin-right: 0.5em;
  font-size: 1.5em;
  line-height: 1;
  width: 1em;
  height: 1em;
  display: block;
  transform: scale(1);
  transition: transform 0.05s ease-in-out;
}

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

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

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

input[type="checkbox"]:active+label:before,
input[type="radio"]:active+label:before {
  color: rgb(var(--theme-accent));
  transform: scale(0.9);
}

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

input[type="checkbox"]:not([disabled]):hover:checked+label,
input[type="checkbox"]:not([disabled]):focus:checked+label,
input[type="radio"]:not([disabled]):hover:checked+label,
input[type="radio"]:not([disabled]):focus:checked+label {
  color: rgb(var(--theme-style-text));
}

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

input[type="checkbox"]:checked:focus+label:before,
input[type="radio"]:checked:focus+label:before {
  transform: scale(1.2);
}

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

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

input[type="checkbox"][disabled]:active+label:before,
input[type="radio"][disabled]:active+label:before {
  transform: none;
}

input[type="checkbox"]+label:before,
input[type="radio"]+label:before {
  font-family: "Icons" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
}

input[type="checkbox"]+label:before {
  content: "\e835";
}

input[type="checkbox"]:checked+label:before {
  content: "\e834";
}

input[type="radio"]+label:before {
  content: "\e836";
}

input[type="radio"]:checked+label:before {
  content: "\e837";
}

/* color */
input[type="color"] {
  background-color: transparent;
  padding: 0;
  margin: 0 0 1em 0;
  width: 100%;
  height: 2.5em;
  display: block;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  border-radius: var(--theme-radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--layout-transition-speed-fast) ease-in-out, box-shadow var(--layout-transition-speed-fast) ease-in-out;
}

input[type="color"]:hover {
  outline: none;
  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
}

input[type="color"]:focus {
  outline: none;
  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-10));
}

input[type="color"][disabled] {
  opacity: 0.5;
}

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

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

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

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

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

/* 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);
  height: 2em;
  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"]:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background-color: rgb(var(--theme-gray-08));
  height: var(--layout-line-width);
  width: 100%;
  border: 0;
  border-radius: var(--theme-radius);
  transform: translate(0, -50%);
  transition: all var(--layout-transition-speed-fast) ease-in-out;
}

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

input[type="range"]:focus:before {
  background-color: rgb(var(--theme-style-text));
}

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

input[type="range"][disabled]:before {
  background-color: rgb(var(--theme-gray-04));
  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(--theme-gray-01));
  color: rgb(var(--form-range-thumb));
  margin: 0;
  padding: 0;
  border-width: var(--layout-line-width);
  border-style: solid;
  border-color: rgb(var(--theme-accent));
  border-radius: 100%;
  position: relative;
  height: 1em;
  width: 1em;
  cursor: pointer;
  box-sizing: border-box;
  /* z-index: 2; */
  transform: scale(1);
  transition: all var(--layout-transition-speed-fast) ease-in-out;
  -webkit-appearance: none;
}

input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(0.9);
}

input[type="range"]:focus::-webkit-slider-thumb {
  transform: scale(1.2);
  outline: none;
}

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

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

input[type="range"][disabled]::-webkit-slider-thumb {
  border-color: rgb(var(--theme-gray-04));
  cursor: default;
}

input[type="range"][disabled]:active::-webkit-slider-thumb,
input[type="range"][disabled]:focus::-webkit-slider-thumb {
  transform: scale(1);
  outline: none;
}

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

input[type="range"]::-moz-range-thumb {
  background-color: rgb(var(--theme-gray-01));
  color: rgb(var(--form-range-thumb));
  margin: 0;
  padding: 0;
  border-width: var(--layout-line-width);
  border-style: solid;
  border-color: rgb(var(--theme-accent));
  border-radius: 100%;
  position: relative;
  height: 1em;
  width: 1em;
  cursor: pointer;
  box-sizing: border-box;
  /* z-index: 2; */
  transform: scale(1);
  transition: all var(--layout-transition-speed-fast) ease-in-out;
  -webkit-appearance: none;
}

input[type="range"]:active::-moz-range-thumb {
  transform: scale(0.9);
}

input[type="range"]:focus::-moz-range-thumb {
  transform: scale(1.2);
  outline: none;
}

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

input[type="range"]::-moz-range-thumb:active {
  outline: none;
  text-decoration: none;
}

input[type="range"]::-moz-range-progress {
  background-color: rgb(var(--theme-accent));
  height: calc(var(--layout-line-width) * 1.5);
  border-radius: var(--theme-radius);
}

input[type="range"][disabled]::-moz-range-track {
  background-color: rgb(var(--theme-gray-04));
}

input[type="range"][disabled]::-moz-range-thumb {
  border-color: rgb(var(--theme-gray-04));
  cursor: default;
}

input[type="range"][disabled]:active::-moz-range-thumb,
input[type="range"][disabled]:focus::-moz-range-thumb {
  transform: scale(1);
  outline: none;
}

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

/* input helper */
.input-helper {
  margin-bottom: 0
}

.input-helper:not(:only-child):not(:last-child) {
  margin-bottom: 0.5em;
}

.input-helper[disabled],
input[type="checkbox"][disabled]~.input-helper,
input[type="radio"][disabled]~.input-helper,
input[type="email"][disabled]~.input-helper,
input[type="number"][disabled]~.input-helper,
input[type="password"][disabled]~.input-helper,
input[type="search"][disabled]~.input-helper,
input[type="tel"][disabled]~.input-helper,
input[type="text"][disabled]~.input-helper,
input[type="range"][disabled]~.input-helper {
  color: rgb(var(--form-input-text-disabled-helper-text));
}

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

.input-wrap.input-button {
  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(--theme-gray-02));
  padding: 0.125em 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-top-width: var(--layout-line-width);
  border-bottom-width: var(--layout-line-width);
  border-style: solid;
  border-color: transparent;
  border-radius: var(--theme-radius);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color var(--layout-transition-speed-fast) ease-in-out, color var(--layout-transition-speed-fast) ease-in-out, border var(--layout-transition-speed-fast) ease-in-out;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.input-button input[type="checkbox"]:hover+label,
.input-button input[type="checkbox"]:focus+label,
.input-button input[type="radio"]:hover+label,
.input-button input[type="radio"]:focus+label,
.input-button input[type="color"]:hover+label,
.input-button input[type="color"]:focus+label,
.input-button input[type="file"]:hover+label,
.input-button input[type="file"]:focus+label {
  background-color: rgb(var(--theme-gray-03));
  border-bottom-color: rgb(var(--theme-gray-08));
  color: rgb(var(--button-text-hover-focus));
  outline: 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(--theme-gray-04));
  border-bottom-color: rgb(var(--theme-accent));
  color: rgb(var(--button-text-active));
  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(--theme-gray-04));
  border-bottom-color: rgb(var(--theme-accent));
  color: rgb(var(--button-text-active));
  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(--theme-gray-02));
  border-color: transparent;
  color: rgb(var(--button-text-disabled));
  cursor: default;
}

.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;
  border: 0;
  color: rgb(var(--button-link-text));
}

.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;
  color: rgb(var(--button-link-text-hover-focus));
}

.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;
  color: rgb(var(--button-link-text-active));
}

.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;
  color: transparent;
}

.input-color-dot input[type="color"] {
  margin: 0;
  position: absolute;
  top: 50%;
  right: 0.5em;
  width: 1em;
  height: 1em;
  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: 2.25em;
  position: relative;
}

.input-hide input[type="checkbox"]+label:before,
.input-hide input[type="checkbox"]:checked+label:before,
.input-hide input[type="radio"]+label:before,
.input-hide input[type="radio"]:checked+label:before,
.input-hide input[type="file"]+label:before,
.input-hide input[type="file"]:checked+label:before {
  content: 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-wrap .input-helper:not(:only-child) {
  padding-top: 0.5em;
}

.form-grid {
  padding: calc(var(--layout-line-width) * 2);
  display: grid;
  border-radius: calc(var(--layout-line-width) * 6);
  border-width: var(--layout-line-width);
  border-style: solid;
  border-color: rgb(var(--form-checkbox-radio-label));
  transition: all var(--layout-transition-speed-fast) ease-in-out;
}

.form-grid:focus,
.form-grid:focus-within {
  outline: 0;
  border-color: rgb(var(--theme-style-text));
}

.form-grid[disabled] {
  border-color: rgb(var(--form-checkbox-radio-disabled-label));
}

.form-grid[disabled]+.input-helper {
  color: rgb(var(--form-input-text-disabled-helper-text));
}

.form-grid[disabled]:focus,
.form-grid[disabled]:focus-within {
  border-color: rgb(var(--form-checkbox-radio-disabled-label));
}

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

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

.form-grid-square {
  width: 7em;
  height: 7em;
}

.form-grid-rectangle {
  width: 7em;
  height: 3em;
}

.form-grid-viewport {
  width: 12vw;
  height: 12vh;
  min-width: 5em;
  min-height: 5em;
}

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

.form-grid input[type="checkbox"]+label,
.form-grid input[type="radio"]+label {
  display: block;
  width: 100%;
  height: 100%;
  border-width: calc(var(--layout-line-width) / 2);
  border-style: solid;
  border-color: transparent;
  position: relative;
  transition: none;
}

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

.form-grid input[type="checkbox"]:active+label,
.form-grid input[type="radio"]:active+label {
  border-color: rgb(var(--theme-accent));
}

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

.form-grid input[type="checkbox"][disabled]:focus+label,
.form-grid input[type="checkbox"][disabled]:hover+label,
.form-grid input[type="radio"][disabled]:focus+label,
.form-grid input[type="radio"][disabled]:hover+label {
  border-color: transparent;
}

.form-grid input[type="checkbox"][disabled]:active+label,
.form-grid input[type="radio"][disabled]:active+label {
  border-color: transparent;
}

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

.form-grid input[type="checkbox"]:not([disabled]):hover:checked+label,
.form-grid input[type="checkbox"]:not([disabled]):focus:checked+label,
.form-grid input[type="radio"]:not([disabled]):hover:checked+label,
.form-grid input[type="radio"]:not([disabled]):focus:checked+label {
  border-color: rgb(var(--theme-accent));
}

.form-grid input[type="checkbox"]+label:before,
.form-grid input[type="radio"]+label:before {
  content: "";
  margin-right: 0;
  font-size: 1em;
  /* margin: var(--layout-line-width); */
  width: inherit;
  height: inherit;
  width: calc(100% - calc(var(--layout-line-width) * 4));
  height: calc(100% - calc(var(--layout-line-width) * 4));
  position: absolute;
  top: calc(var(--layout-line-width) * 2);
  left: calc(var(--layout-line-width) * 2);
  display: block;
  transform: scale(1);
  transition: transform 0.05s ease-in-out;
}

.form-grid input[type="checkbox"]:focus+label:before,
.form-grid input[type="checkbox"]:hover+label:before,
.form-grid input[type="radio"]:focus+label:before,
.form-grid input[type="radio"]:hover+label:before {
  transform: scale(1);
}

.form-grid input[type="checkbox"]:checked+label:before,
.form-grid input[type="radio"]:checked+label:before {
  background-color: rgb(var(--theme-accent));
  transform: scale(1);
}

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

.form-grid input[type="checkbox"][disabled]+label,
.form-grid input[type="radio"][disabled]+label {
  transform: scale(1);
}

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

.form-grid.form-grid-3x3 .input-wrap:nth-child(1) input[type="checkbox"]+label,
.form-grid.form-grid-3x3 .input-wrap:nth-child(1) input[type="radio"]+label {
  border-top-left-radius: calc(var(--layout-line-width) * 3);
}

.form-grid.form-grid-3x3 .input-wrap:nth-child(1) input[type="checkbox"]+label:before,
.form-grid.form-grid-3x3 .input-wrap:nth-child(1) input[type="radio"]+label:before {
  border-top-left-radius: var(--layout-line-width);
}

.form-grid.form-grid-3x3 .input-wrap:nth-child(3) input[type="checkbox"]+label,
.form-grid.form-grid-3x3 .input-wrap:nth-child(3) input[type="radio"]+label {
  border-top-right-radius: calc(var(--layout-line-width) * 3);
}

.form-grid.form-grid-3x3 .input-wrap:nth-child(3) input[type="checkbox"]+label:before,
.form-grid.form-grid-3x3 .input-wrap:nth-child(3) input[type="radio"]+label:before {
  border-top-right-radius: var(--layout-line-width);
}

.form-grid.form-grid-3x3 .input-wrap:nth-child(7) input[type="checkbox"]+label,
.form-grid.form-grid-3x3 .input-wrap:nth-child(7) input[type="radio"]+label {
  border-bottom-left-radius: calc(var(--layout-line-width) * 3);
}

.form-grid.form-grid-3x3 .input-wrap:nth-child(7) input[type="checkbox"]+label:before,
.form-grid.form-grid-3x3 .input-wrap:nth-child(7) input[type="radio"]+label:before {
  border-bottom-left-radius: var(--layout-line-width);
}

.form-grid.form-grid-3x3 .input-wrap:nth-child(9) input[type="checkbox"]+label,
.form-grid.form-grid-3x3 .input-wrap:nth-child(9) input[type="radio"]+label {
  border-bottom-right-radius: calc(var(--layout-line-width) * 3);
}

.form-grid.form-grid-3x3 .input-wrap:nth-child(9) input[type="checkbox"]+label:before,
.form-grid.form-grid-3x3 .input-wrap:nth-child(9) input[type="radio"]+label:before {
  border-bottom-right-radius: var(--layout-line-width);
}

.form-grid.form-grid-3x1 .input-wrap:nth-child(1) input[type="checkbox"]+label,
.form-grid.form-grid-3x1 .input-wrap:nth-child(1) input[type="radio"]+label {
  border-top-left-radius: calc(var(--layout-line-width) * 3);
  border-bottom-left-radius: calc(var(--layout-line-width) * 3);
}

.form-grid.form-grid-3x1 .input-wrap:nth-child(1) input[type="checkbox"]+label:before,
.form-grid.form-grid-3x1 .input-wrap:nth-child(1) input[type="radio"]+label:before {
  border-top-left-radius: var(--layout-line-width);
  border-bottom-left-radius: var(--layout-line-width);
}

.form-grid.form-grid-3x1 .input-wrap:nth-child(3) input[type="checkbox"]+label,
.form-grid.form-grid-3x1 .input-wrap:nth-child(3) input[type="radio"]+label {
  border-top-right-radius: calc(var(--layout-line-width) * 3);
  border-bottom-right-radius: calc(var(--layout-line-width) * 3);
}

.form-grid.form-grid-3x1 .input-wrap:nth-child(3) input[type="checkbox"]+label:before,
.form-grid.form-grid-3x1 .input-wrap:nth-child(3) input[type="radio"]+label:before {
  border-top-right-radius: var(--layout-line-width);
  border-bottom-right-radius: var(--layout-line-width);
}

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

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

.form-group-text {
  background-color: rgb(var(--theme-gray-02));
  padding: 0 1em;
  margin: 0;
  color: rgb(var(--theme-style-text));
  min-width: 4em;
  font-size: 1em;
  font-family: var(--font-regular);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-top-width: var(--layout-line-width);
  border-bottom-width: var(--layout-line-width);
  border-style: solid;
  border-color: transparent;
  border-radius: var(--theme-radius);
  transition: background-color var(--layout-transition-speed-fast) ease-in-out, border-color var(--layout-transition-speed-fast) ease-in-out;
}

.form-group-text:hover,
.form-group-text:focus {
  background-color: rgb(var(--theme-gray-03));
  border-bottom-color: rgb(var(--theme-gray-08));
  outline: none;
}

.form-group-text[disabled] {
  background-color: rgb(var(--theme-gray-02));
  color: rgb(var(--form-input-placeholder-disabled));
  box-shadow: none;
  cursor: default;
}

.form-group-text[disabled]:hover,
.form-group-text[disabled]:focus {
  background-color: rgb(var(--theme-gray-02));
  border-color: transparent;
}

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

.form-group button,
.form-group .button,
.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"] {
  margin: 0;
  border-radius: 0;
}

.form-group .form-group-text {
  margin-bottom: 0;
  margin-left: calc(-1px * var(--form-input-border));
  border-radius: 0;
  z-index: 1;
  position: relative;
}

.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"] {
  z-index: 2;
}

.form-group>.form-group-text: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 {
  z-index: 3;
}

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

.form-group>.form-group-text:first-child,
.form-group>button:first-child,
.form-group>.button: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 {
  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,
.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 {
  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 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 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-feedback {
  padding: 1em 1.5em;
  background-color: rgb(var(--theme-gray-02));
  /* border-bottom: var(--layout-line-width) solid rgb(var(--theme-gray-04)); */
  border-radius: var(--theme-radius);
}

.form-feedback:not(:last-child) {
  margin-bottom: 1em;
}