input:not([type="reset"], [type="submit"], [type="checkbox"], [type="radio"]),
textarea,
select {
  margin: 0.2em 0;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  font-size: 1rem;
  background-color: var(--input-background-color);
  min-width: 20rem;
  padding: 0.25em 0.25em;
}

textarea {
  resize: vertical;
  min-height: 1.75rem;
}

input:not([type="reset"], [type="submit"], [type="checkbox"], [type="radio"]):focus,
input:not([type="reset"], [type="submit"], [type="checkbox"], [type="radio"]):focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  border: 1px solid var(--input-focus-border-color);
  outline: none;
}

input[readonly]:not([type="reset"], [type="submit"], [type="checkbox"], [type="radio"]),
textarea[readonly],
select[readonly] {
  border: none;
  outline: none;
}

label {
  display: block;
  color: var(--fieldset-label-color);

  &.disabled {
   color:  var(--fieldset-disabled-color);
  }
}
.disabled label { color: var(--fieldset-disabled-color); }

:checked + label {
  font-weight: bold;
}

label:has(~ :placeholder-shown),
label:has(~ [value=""]) {
  color: var(--clr-canvas-text);
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--input-background-color);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg stroke='currentColor' viewBox='0 0 16 9' width='16' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='4' y1='4' x2='8' y2='8' stroke-linecap='round' stroke-width='2' /%3E%3Cline x1='12' y1='4' x2='8' y2='8' stroke-linecap='round' stroke-width='2' /%3E%3C/svg%3E");
  background-position: right 0.25em top 40%;
  background-repeat: no-repeat;
  border-radius: 0.25em;
}

fieldset {
  margin-top: 1rem;
  legend {
    font-weight: bold;
    color: var(--fieldset-legend-color);
  }
}

form.inline {
  display: flex;
  align-items: last baseline;
  gap: 1rem;
}

form .field {
  margin-top: 0.5rem;

  &.indented {
    margin-left: 2em;
  }

  &.inline {
    > label {
      display: inline-block;
      padding-left: 0.5em;
    }
    > label + input {
      padding-left: 0.25em;
    }
    > .select {
      display: inline-block;
      margin-left: 0.5em;
    }
  }

  &.inline {
    .checkbox,
    .radio {
      display: flex;
      align-items: first baseline;
      flex-wrap: wrap;

      input[type=checkbox],
      input[type=radio] {
        margin-top: 0.1rem;
      }

      label {
        max-width: calc(100% - 2.5em); /* leave place for checkbox input on the left */
      }
    }
  }

  &.full {
    width: 100%;

    input,
    select,
    textarea {
      width: 100%;
    }
  }

  &.half {
    width: 50%;

    input,
    select,
    textarea {
      width: 100%;
    }
  }
}

form .form-actions {
  margin-top: 1rem;

  .right {
    float: right;
  }
}


/* a twelve column field row */
form .field-row {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  width: 100%;
  margin-top: 1em;
  align-items: end;
  gap: 1rem;

  .field {
    margin-bottom: 0;

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      margin-right: 0;
    }

    &.one.wide { grid-column: span 1; }
    &.two.wide { grid-column: span 2; }
    &.three.wide { grid-column: span 3; }
    &.four.wide { grid-column: span 4; }
    &.five.wide { grid-column: span 5; }
    &.six.wide { grid-column: span 6; }
    &.seven.wide { grid-column: span 7; }
    &.eight.wide { grid-column: span 8; }
    &.nine.wide { grid-column: span 9; }
    &.ten.wide { grid-column: span 10; }
    &.eleven.wide { grid-column: span 11; }
    &.twelve.wide { grid-column: span 12; }

    input:not([type="reset"], [type="submit"], [type="checkbox"], [type="radio"]),
    textarea,
    select {
      width: 100%;
      min-width: 0 !important;
      max-width: none !important;
    }
  }
}

@media(max-width: 640px) {
  form .field-row {
    grid-template-columns: repeat(1, 1fr);

    .field {
      width: 100% !important;
      padding: 0 !important;
      order: 1;
      grid-column: span 12 !important;
    }
  }

}

.field-error-messages {
  white-space: nowrap;
  margin-left: 0.5rem;
}

.with-error,
.field-error-message {
  color: var(--message-error-text-color) !important;
}