/* Margins */

form {
  margin-top: 1rem;

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

  ol {
    li {
      margin-top: 0.4rem;
    }
  }

  input, label, ol, section {
    margin-top: 1rem;
    margin-bottom: 0px;
  }

  fieldset {
    margin-top: 1.5rem;
    margin-bottom: 0px;
  }

  label + input, label + textarea, label + select, trix-toolbar, label + input[type="hidden"] + input[type="file"] {
    margin-top: var(--label-input-gap-size);
  }

  input[type="submit"] {
    margin-top: 2rem;

    &:first-child {
      margin-top: 0px;
    }
  }

  &.inline {
    input[type="submit"], span:has(label):has(input) label, span:has(label):has(input) input, input {
      margin-top: 0px;
    }
  }

  /* For Rails forms which put hidden authenticity_token field as a first child in forms */
  input[type="hidden"] + h1, input[type="hidden"] + input[type="submit"] {
    margin-top: 0;
  }

  h1 + label:first-of-type {
    margin-top: 1rem;
  }
}

label + .multiselect {
  margin-top: var(--label-input-gap-size);
}

label:first-of-type, fieldset:first-child, fieldset label, fieldset input, section label:first-child, ol input, ol fieldset {
  margin-top: 0px;
}

label + fieldset, fieldset:has(input[type='radio']):has(legend) label, fieldset:has(input[type='checkbox']):has(legend) label {
  margin-top: var(--label-input-gap-size);
}

/* End margins */

form {
  &.inline {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
  }

  &.bold {
    input, textarea {
      font-weight: bold;
    }

    label:has(input:checked) {
      font-weight: bold;
    }
  }

  small {
    color: #4d4d4d;
  }

  section {
    border: none;
    background-color: inherit;
    padding: 0rem 1rem;

    ol {
      padding-left: 1rem;
    }
  }

  &.inline {
    span:has(label):has(input) {
      display: flex;
      align-items: center;
      gap: 0px;

      label {
        border-left: 1px solid var(--light-gray);
        border-top: 1px solid var(--light-gray);
        border-bottom: 1px solid var(--light-gray);
        border-top-left-radius: var(--border-radius);
        border-bottom-left-radius: var(--border-radius);
        padding: 3px 6px;
        background-color: white;
      }

      input {
        border-left: none;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
      }
    }

    input[type="submit"] {
      padding: 3px 15px;
    }

    select, input[type='date'], input[type='number'], input[type='text'] { width: auto; }
  }
}

/* Other settings */

select, input:not([type='submit']), textarea {
  display: block;
  width: 100%;
}

input + small, textarea + small, select + small {
  display: block;
  margin-top: 0.1rem;
}

input, textarea {
  padding: 3px 6px;
}

label, input {
  display: block;
}

label, legend {
  font-size: 1.05rem;
}

select, trix-editor, trix-toolbar .trix-button, input {
  background-color: white;
}

select {
  padding: 5px 6px;
}

label:has(input[type="checkbox"]), label:has(input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;

  background-color: white;
  padding: 5px 11px;
  white-space: nowrap;
  border: 1px solid var(--lightest-gray);
  font-size: 1rem;

  &:has(input[disabled]) {
    background-color: #fdf5eb;
  }

  &:has(input:checked) {
    border: 1px solid #3584e4;
  }

  &:hover {
    cursor: pointer;
  }

  input {
    margin-top: 0px;
    width: auto;
  }
}

label:has(input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;

  input {
    margin-top: 0px;
  }
}

input[type="checkbox"], input[type="radio"] {
  &:hover {
    cursor: pointer;
  }
}

input, textarea, select {
  font: inherit;
  border: 1px solid var(--light-gray);
}

fieldset {
  gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  border: 0px;
  padding: 0px;
  padding-inline: 0px;
  padding-block: 0px;
  margin-inline: 0px;

  div {
    margin-top: 0;
  }

  select, input:not([type='submit']), textarea, div {
    flex: 1;
  }

  &:has(input[type='radio']), &:has(input[type='checkbox']) {
    gap: 0.5rem;
    align-items: center;
  }

  /*   display: block; */
  /*  */
  /*   input, label { */
  /*     width: auto; */
  /*     display: inline-block; */
  /*   } */
  /* } */

  /* input[type='radio'] { */
  /*   flex: 0; */
  /* } */
}

fieldset.grid {
  display: grid;

  input, select {
    width: 100%;
  }
}

.form {
  border: 1px solid var(--lightest-gray);
  background-color: antiquewhite;
  padding: 1rem;

  table tr th {
    background-color: antiquewhite;
  }
}

/* Rail's default class for button_to */
.button_to {
  display: inline-block;
  margin-top: 0px;
  input[type="submit"] {
    margin-top: 0px;
  }
}

form, form input, form select, form textarea, label:has(input[type="checkbox"]) {
  border-radius: var(--border-radius);
}

input[disabled], textarea[disabled], input[readonly="readonly"], textarea[readonly="readonly"], select[disabled], select[readonly="readonly"], trix-editor[disabled], trix-editor[readonly="readonly"] {
  color: var(--gray);
  background-color: #fdf5eb;
}

*::-webkit-input-placeholder {
    font-weight: normal;
}
*::-moz-placeholder {
    font-weight: normal;
}
*::placeholder {
    font-weight: normal;
}