@layer components {
/* Input components — BEM only */

/* Base wrapper for all form inputs */
.input {
  display: inline-block;
  position: relative;
  margin-bottom: var(--space-md);
  width: 100%;
}

/* Text-like inputs: text, password, email, tel, number, file */
.input input:not([type="submit"]):not([type="button"]),
.input--file input {
  border: 1px solid var(--neutral-300);
  width: 100%;
  height: 100%;
  padding: 5px;
  border-radius: 4px;
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size-sm);
  background-color: var(--white);
}

.input input:not([type="submit"]):not([type="button"]):focus {
  outline: 0;
  border-color: var(--primary-500);
}

/* File input wrapper */
.input--file {
  display: inline-block;
  position: relative;
  margin-bottom: var(--space-md);
  width: 100%;
}

/* Select & Textarea */
.input--select,
.input--textarea {
  margin-bottom: var(--space-md);
  width: 100%;
}

.input--select select,
.input--textarea textarea {
  border: 1px solid var(--neutral-300);
  width: 100%;
  padding: 5px;
  border-radius: 4px;
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size-sm);
}

.input--select select:focus,
.input--textarea textarea:focus {
  outline: 0;
  border-color: var(--primary-500);
}

.input--textarea textarea {
  min-height: 100px;
}

/* Caption (label/helper text) */
.input .caption {
  margin: 0 var(--space-sm);
}

/* Clear button inside text inputs */
.input .input__clear {
  background-color: transparent;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  border: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  margin: 0;
  display: none;
  cursor: pointer;
  font-size: 1.6em;
  line-height: 34px;
  text-align: center;
  color: var(--neutral-400);
}

.input .input__clear:after {
  content: "\00D7";
}

.input .input__clear:not(:disabled):active {
  background-color: var(--neutral-900);
  color: var(--white);
}

/* Show clear button when input is focused */
.input input:focus ~ .input__clear {
  display: block;
}

.input input:not(:focus) ~ .input__clear:active {
  display: block;
}

/* Hide clear button for disabled inputs */
.input input:disabled ~ .input__clear {
  display: none;
}

/* Checkbox & Radio shared */
.input--checkbox,
.input--radio {
  display: inline-block;
  cursor: pointer;
  width: auto;
  position: relative;
  margin-bottom: var(--space-md);
}

.input--radio label,
.input--checkbox label {
  display: block;
}

/* Hide native input */
.input--checkbox input[type="checkbox"],
.input--radio input[type="checkbox"],
.input--checkbox input[type="radio"],
.input--radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

/* Custom indicator */
.input--checkbox .input__check,
.input--radio .input__check {
  width: 20px;
  height: 20px;
  background-color: var(--white);
  border: 2px var(--neutral-300) solid;
  padding: 0;
  margin: 0 var(--space-sm) 0 0;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.input--checkbox .input__check:after,
.input--radio .input__check:after {
  position: absolute;
  font-size: 9pt;
  line-height: 9pt;
}

.input--radio .input__check {
  border-radius: 50%;
}

/* Checked state — checkmark icon */
.input--checkbox input[type="checkbox"]:checked ~ .input__check:after,
.input--radio input[type="radio"]:checked ~ .input__check:after {
  content: "\2714";
  margin: 2px;
  top: 0;
  color: var(--neutral-900);
}

/* Radio checked — filled dot */
.input--radio input[type="radio"]:checked ~ .input__check:after {
  content: "" !important;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--neutral-900);
  margin: 3px;
}

/* Hover */
.input--checkbox:hover .input__check,
.input--radio:hover .input__check {
  border-color: var(--neutral-500);
}

/* Focus */
.input--checkbox input[type="checkbox"]:focus ~ .input__check,
.input--radio input[type="radio"]:focus ~ .input__check {
  outline: 1px var(--neutral-400) dotted;
}

/* Disabled */
.input--checkbox input[type="checkbox"]:disabled ~ .input__check,
.input--radio input[type="radio"]:disabled ~ .input__check {
  border-color: var(--neutral-300);
  background-color: var(--neutral-100);
}

.input--checkbox input[type="checkbox"]:disabled ~ .input__check:after,
.input--radio input[type="radio"]:disabled ~ .input__check:after {
  color: var(--neutral-400);
}

/* Switch (toggle) */
.input--switch {
  display: inline-block;
  cursor: pointer;
  width: auto;
  position: relative;
  margin-bottom: var(--space-md);
}

.input--switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.input--switch .input__check {
  position: relative;
  width: 45px;
  height: 18px;
  outline: 2px var(--neutral-400) solid;
  border: 1px var(--white) solid;
  cursor: pointer;
  background: var(--neutral-400);
  z-index: 1;
  display: inline-block;
  vertical-align: middle;
}

.input--switch .input__check:after {
  position: absolute;
  left: -1px;
  top: -1px;
  display: block;
  content: "";
  width: 9px;
  height: 16px;
  outline: 2px var(--neutral-700) solid;
  border: 1px var(--neutral-700) solid;
  cursor: pointer;
  background: var(--neutral-700);
  z-index: 2;
}

/* Switch checked: track turns primary, knob slides right */
.input--switch input[type="checkbox"]:checked ~ .input__check {
  background: var(--primary-500);
}

.input--switch input[type="checkbox"]:checked ~ .input__check:after {
  left: auto;
  right: -1px;
}

/* Switch disabled */
.input--switch input[type="checkbox"]:disabled ~ .input__check {
  background-color: var(--neutral-100);
  border-color: var(--white);
}

.input--switch input[type="checkbox"]:disabled ~ .input__check:after {
  background-color: var(--neutral-400);
  outline-color: var(--neutral-400);
  border-color: var(--neutral-400);
}
}