:root {
  --_input-background: var(--input-background, var(--color-surface-strong));
  --_input-color: var(--input-color, var(--color-text-strong));
  --_input-border: var(
    --input-border,
    var(--border-thin) solid var(--color-text-subtle)
  );
  --_input-outline: var(
    --input-outline,
    var(--border-thick) solid var(--color-brand-strong)
  );
  --_input-disabled-filter: var(
    --input-disabled-filter,
    contrast(0.72) opacity(0.72)
  );
}

.input-field {
  display: grid;
  gap: var(--space-small);
  grid-template-columns: minmax(0, 1fr);
  width: fit-content;
  place-items: start;

  & > label {
    --gap: var(--space-tiny);
  }
}

.input-hint {
  --color-default: var(--color-text-subtle);
  display: block;

  &:before {
    content: "?";
  }
}

.input-error {
  --color-default: var(--color-status-error);
  color: var(--color-default);

  &:before {
    content: "!";
  }
}

.input-error,
.input-hint {
  &:before {
    font-family: var(--font-family-mono);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--font-weight-regular);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-default);
    color: var(--color-surface-strong);
    margin-right: 0.5em;
    inline-size: 1em;
    block-size: 1em;
    aspect-ratio: 1;
  }
}

.checkbox-input {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--space-near);
  width: fit-content;
  place-items: start;
  font-size: inherit;
}

input[type="checkbox"].switch {
  --_switch-width: var(--switch-width, calc(1em * var(--line-height-base) * 2));
  --_switch-height: var(--switch-height, calc(var(--_switch-width) / 2));
  --_switch-color: var(--switch-color, var(--_input-background));
  --_switch-color-checked: var(
    --switch-color-checked,
    var(--color-brand-strong)
  );
  --_thumb-margin: var(--thumb-margin, calc(var(--_switch-width) / 12));
  --_thumb-color: var(--thumb-color, var(--_input-color));

  vertical-align: var(--_thumb-margin);
  inline-size: var(--_switch-width);
  block-size: var(--_switch-height);
  box-sizing: border-box;
  border-radius: 0;
  --current-background: var(--_switch-color);
  justify-content: flex-start;

  @media (--motionOK) {
    transition-duration: 250ms;
  }

  &:before {
    content: "";
    display: block;
    aspect-ratio: 1;
    margin: var(--_thumb-margin);
    block-size: calc(100% - 2 * var(--_thumb-margin));
    background: var(--_thumb-color);
    border-radius: 0;
    transition: margin;
    transition-duration: inherit;
  }

  &:checked {
    --current-background: var(--_switch-color-checked);
  }

  &:checked:before {
    margin-inline-start: calc(
      var(--_switch-width) - var(--_switch-height) + var(--_thumb-margin)
    );
  }

  &:focus {
    outline: none;
  }

  &:focus:before {
    outline: var(--_input-outline);
    outline-offset: 0;
  }
}

:where(select) {
  appearance: none;
}

.select-wrapper {
  display: grid;
  grid-template: "select" 1fr / 1fr;
  color: var(--_input-color);

  &:after {
    grid-area: select;
    content: "V";
    justify-self: end;
    align-self: center;
    width: 0.71em;
    height: 0.48em;
    background-color: var(--_input-color);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    margin-inline-end: var(--space-near);
  }
}

select.select {
  grid-area: select;
  padding-inline-end: var(--space-away);
}