input[type=text],
input[type=password],
input[type=email],
input[type=datetime-local],
select,
textarea {
  border: 1px solid var(--color-input-border);
  border-radius: 0.6em;
  padding: 0.4em 0.7em;
  background: var(--color-bg-lightest);

  &:focus {
    box-shadow: 0 0 0 2px var(--color-input-focus);
    outline: none;
  }
}

select {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40" stroke-width="1.65" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7.5 7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5" /></svg>');
  background-repeat: no-repeat;
  background-position-x: calc(100% + .35rem);
  background-position-y: .4em;
  padding-right: 2.35em;
}

textarea {
  width: 100%;
  resize: none;
}

.form-fields {
  margin: 1rem 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;

  > label {
    font-weight: 500;
  }

  > br {
    display: none;
  }
}

.form-footer {
  margin: 1rem 0;
}

.form-fields__input {
  input[type=text],
  input[type=password],
  input[type=email],
  select,
  textarea {
    width: 100%;
  }
}

.input-legend {
  font-size: 0.95rem;
  margin: -0.5em 0 0.5rem;
  line-height: 1.25;
  grid-column: 1 / -1; /* Span all columns */
}

.form--tight {
  input[type=text],
  input[type=password],
  input[type=email],
  input[type=datetime-local],
  select,
  textarea {
    padding: 0.3em;
  }

  .btn {
    padding: 0.3em 1em;
  }
}

/* Checkbox */

input[type="checkbox"] {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  padding: 4px;
  border: 1px solid var(--color-input-border);
  appearance: none;
  background-color: transparent;
}

input[type="checkbox"]:checked {
  background-size: cover;
  padding: 2px;
}

input[type="checkbox"]:not(:disabled):checked {
  border-color: var(--checkbox-checked-color);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %23274c77" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
}

input[type="checkbox"]:disabled {
  background-color: var(--checkbox-disabled-bg-color);
}

input[type="checkbox"]:disabled:checked {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 32 32" xml:space="preserve"><path style="fill: %238b8c89" d="M11.941,28.877l-11.941-11.942l5.695-5.696l6.246,6.246l14.364-14.364L32,8.818"/></svg>');
}