@use '../styles/defaults' as *;
@use '../styles/variables' as *;
@use './field.module' as *;
@use './button.module' as *;

@mixin legend {
  font-size: 1.75rem;
  font-weight: 500;
  margin: 0;
  padding: 0.5rem;
  text-align: left;
  width: 100%;
}

.selectContainer {
  @include selectFieldContainer;

  select {
    @include actionField;
    @include selectField;
  }

  select:disabled {
    border: 0;
    box-shadow: none;
    color: $main-color;
    background-color: $muted-background-color;
  }
}

.selectDisabled {
  &:after {
    display: none;
  }
}

.form {
  :global {
    label {
      font-weight: 500;
      padding-bottom: 0.15rem;
      font-size: 0.875rem;
    }

    [role='combobox'] {
      position: relative;

      [role='listbox']:not(:empty) {
        background: #fcfcfc;
        border: 1px solid grey;
        padding: 0.5rem;
        position: absolute;
        z-index: 1000;
        width: 100%;
        max-height: 250px;
        overflow-y: auto;

        > li {
          cursor: pointer;
        }
      }
    }

    .form-group {
      display: flex;
      flex-direction: column;
      align-items: start;

      &.field-array {
        border-bottom: none;
        flex-direction: column;
        padding: 0;

        > label {
          padding-bottom: 0.25rem;
          font-weight: 500;
        }

        > * {
          width: 100%;
        }

        .field-object > label {
          display: none;
        }

        > fieldset {
          > button {
            font-weight: 500;
          }
        }
      }

      &.inline-field-string {
        border-bottom: none;

        .array-item {
          display: flex;

          .field-string {
            flex: 1;
            border-bottom: none;

            > input {
              width: 100%;
            }
          }

          button {
            align-self: center;
          }
        }
      }

      &.field-object {
        flex-direction: column;
        flex: 1;
        gap: 0.5rem;
        position: relative;

        > * {
          width: 100%;
        }

        &.person {
          margin-top: 1rem;
        }
      }

      &.field-string,
      &.field-boolean {
        label {
          padding-bottom: 0.15rem;
        }
      }

      fieldset {
        flex: 1 0 auto;
        margin-left: 0;
        margin-right: 0;
      }

      select {
        width: 100%;
      }

      select:disabled {
        @include inputFieldDisabled;
      }

      input[type='email'],
      input[type='date'],
      input[type='text'],
      input[type='url'] {
        @include inputField;
      }

      input[type='email']:read-only,
      input[type='date']:read-only,
      input[type='text']:read-only,
      input[type='url']:read-only {
        @include inputFieldDisabled;
      }

      input[type='date'] {
        /* increase the font size because monospaced font (inherited from user agent) is slightly smaller */
        font-size: 1.2em;
      }

      /** Checkbox field */
      .checkboxes {
        padding-left: 10%;

        .checkbox.disabled {
          label {
            cursor: default;
          }
        }

        .checkbox {
          padding: 0.5rem 0;

          label {
            cursor: pointer;
            display: block;
          }

          span {
            display: flex;

            input[type='checkbox'] + span {
              flex: 1;
            }
          }
        }
      }

      .array-item.keywords, .array-item.disciplines, .array-item.affiliations {
        display: flex;
        align-items: center;

        > .field-string {
          flex: 1;
        }
      }

      /** Array of objects field */
      .array-item.can-add-remove {
        > div {
          padding-right: 0;
        }

        > button {
          border: 1px solid $main-color;
        }

        > button:disabled {
          border: none;
          background-color: $muted-background-color;
        }

        > .field-string {
          display: unset;
        }

        > .field-string + button {
          border-left: none;
        }
      }
    }
  }

  label {
    padding-right: 0.5rem;
  }

  textarea {
    width: 100%;
    height: 150px;
  }
}

.verticalForm {
  :global {
    .control-field {
      flex-direction: column;
      margin-bottom: 1rem;

      label {
        flex-basis: 1em;
      }
    }
  }
}

.fieldset {
  display: flex;
  flex-direction: column;
  border: none;
  gap: 0.5rem;
  padding: 0 0 1.5rem;
  margin: 0;
  font-size: 1em;

  legend {
    @include legend;
    padding: 0 0 0.5rem;
    font-size: 1.15em;
  }

  fieldset {
    font-size: 0.8em;
  }
}

.comboboxReadonlyField {
  margin-right: 0.5em;
}

.autocompleteField {
}

.addButton,
.removeButton {
  font-size: 1em;
  margin-top: 0.25rem;
}

.inlineRemoveButton {
  font-size: 1rem;
  margin-top: 0;
}

.output {
  color: gray;
}

.fieldHasNoElementError {
  border: 1px solid $error-color;
  margin: 0.5em;
  padding: 0.5rem;
}
