/* ========================================================= */
/* Inputs
/* ========================================================= */

/* Text */

input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="checkbox"], textarea, select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: var(--greige4);
  height: 2.75rem;
  padding: var(--s2) var(--s3);
  display: block;
  font-size: var(--fs1);
  font-family: var(--sans-serif);
  color: var(--gray4);
  width: 100%;
  border-top: 2px solid var(--greige4);
  border-bottom: 2px solid transparent;
  box-shadow: none;
  -webkit-border-radius: 0;
  border-radius: 0;
}
textarea {
  height: 8.25rem;
  min-height: 8.25rem;
  resize: vertical;
  line-height: var(--lh-single);
}
input[type="text"].alt, input[type="email"].alt, input[type="password"].alt, input[type="number"].alt, textarea.alt {
  background: var(--greige2);
  border-top-color: var(--greige2);
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, textarea:focus {
  outline: none;
  background: var(--greige1);
  border-top-color: var(--greige1);
  border-bottom-color: var(--gray4);
}
label {
  font-family: var(--sans-serif);
  display: block;
  font-size: var(--fs2);
}

/* Select */

select {
  padding-right: 3rem;
}
.selectWrapper {
  position: relative;
}
.selectWrapper:after {
  font-family: var(--icon);
  content: '\f078';
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  color: var(--gray4);
  pointer-events: none;
  height: 2.75rem;
}

/* Fieldsets */
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
legend {
  font-family: var(--sans-serif);
  display: block;
  font-size: var(--fs2);
}

/* Checkboxes */
.overflowingCheckboxesGroup {
  max-height: var(--s6);
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}
.checkboxContainer { 
  display: flex;
  gap: var(--s2);
  position: relative;
}
.checkboxContainer label {
  cursor: pointer;
  display: flex;
  gap: var(--s2);
  flex: 1;
  font-size: var(--fs1);
  line-height: var(--lh-single);
}
.checkboxContainer input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 1;
  height: 1;
}
.checkboxContainer label:before {
  --size: calc(var(--s3) * 1.5);
  opacity: 1;
  background: var(--greige1);
  min-width: var(--size);
  width: var(--size);
  height: var(--size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--icon);
  content: '';
  cursor: pointer;
}
.checkboxContainer:has(input[type="checkbox"]:checked) label:before {
  content: '\f00c';
}
.checkboxContainer:focus-within label:before {
  outline: 2px solid var(--black);
  outline-offset: 3px;
  isolation: isolate;
}

/* Radio */
.overflowingRadioGroup {
  max-height: var(--s6);
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}
.radioContainer { 
  display: flex;
  gap: var(--s2);
  position: relative;
}
.radioContainer label {
  cursor: pointer;
  display: flex;
  gap: var(--s2);
  flex: 1;
  font-size: var(--fs1);
  line-height: var(--lh-single);
}
.radioContainer input[type="radio"] {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 1;
  height: 1;
}
.radioContainer label:before {
  --size: calc(var(--s3) * 1.5);
  opacity: 1;
  background: var(--greige1);
  min-width: var(--size);
  width: var(--size);
  height: var(--size);
  border-radius: var(--size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--icon);
  content: '';
  cursor: pointer;
}
.radioContainer:has(input[type="radio"]:checked) label:before {
  content: '\f111';
}
.radioContainer:focus-within label:before {
  outline: 2px solid var(--black);
  outline-offset: 3px;
  isolation: isolate;
}

/* Placeholders */

::placeholder { color: var(--gray4); opacity: 0.7; }

/* Autofill: Webkit */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--gray4);
  -webkit-box-shadow: 0 0 0px 1000px var(--greige4) inset;
  border-bottom-color: var(--greige4);
  transition: background-color 5000s ease-in-out 0s;
  font-family: var(--sans-serif);
}
input.alt:-webkit-autofill,
input.alt:-webkit-autofill:hover,
input.alt:-webkit-autofill:focus,
textarea.alt:-webkit-autofill,
textarea.alt:-webkit-autofill:hover,
textarea.alt:-webkit-autofill:focus,
select.alt:-webkit-autofill,
select.alt:-webkit-autofill:hover,
select.alt:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--greige2) inset;
  border-bottom-color: var(--greige2);
}
input:focus:-webkit-autofill,
input:focus:-webkit-autofill:hover,
input:focus:-webkit-autofill:focus,
textarea:focus:-webkit-autofill,
textarea:focus:-webkit-autofill:hover,
textarea:focus:-webkit-autofill:focus,
select:focus:-webkit-autofill,
select:focus:-webkit-autofill:hover,
select:focus:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px var(--greige1) inset;
  border-bottom-color: var(--black);
}

/* Autofill: other */
input:autofill,
textarea:autofill,
select:autofill {
  background: var(--greige4);
  font-family: var(--sans-serif);
  border-bottom-color: var(--greige4);
  color: var(--gray4);
}
input.alt:autofill,
textarea.alt:autofill,
select.alt:autofill {
  background: var(--greige2);
  border-bottom-color: var(--greige2);
}
input:focus:autofill,
textarea:focus:autofill,
select:focus:autofill {
  background: var(--greige1);
  border-bottom-color: var(--black);
}