input, select {
    box-sizing: border-box;
    transition: 180ms box-shadow ease-in-out;
    border-radius: 4px;
    transition: border .3s;
    background-color: #fff;
    caret-color: #333;
    color: #333;
    font-size: 1rem;
    border: 1px solid #adadad;
    width: 100%;
    padding: 0px 10px;
}

input:focus, select:focus {
  border-color: hsl(
    var(--input-focus-h),
    var(--input-focus-s),
    var(--input-focus-l)
  );
  box-shadow: 0 0 0 3px
    hsla(
      var(--input-focus-h),
      var(--input-focus-s),
      calc(var(--input-focus-l) + 40%),
      0.8
    );
  outline: 3px solid transparent;
}

input:not(textarea),
select, option {
  line-height: 1;
  height: 2.25rem;
}

input[type="file"] {
  font-size: 0.9em;
  padding-top: 0.35rem;
}

textarea.input {
  resize: vertical;
}

input[readonly] {
  border-style: dotted;
  cursor: not-allowed;
  color: #777;
}

input[disabled] {
  --input-border: #ccc;

  background-color: #eee;
  cursor: not-allowed;
}

input[type="checkbox"] {
  display: inline-flex;
  width: min-content;
  vertical-align: middle;
  width: 1.25rem;
  height: 1.25rem;
}

label + input,
label + select  {
  margin-top: .5rem;
}

label + input[type="checkbox"] {
  margin-top: 0;
}

label {
  font-size: 1rem;
  display: block;
  line-height: 14px;
  font-weight: 600;
}

.checkbox-wrapper {
  padding-top: 1rem;
  display: flex;
  column-gap: 1rem;
  align-items: center;
}
.checkbox-wrapper label {
  padding-top: 0;
}