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

  &.d-field-textarea {
    .d-field-input-wrapper {
      height: auto;
      max-width: 100%;
    }

    textarea {
      min-width: 100%;
    }
  }

  &[doku-field-prefix],
  &[doku-field-suffix] {
    .d-field-input-wrapper {
      border-color: transparent;
    }
  }
}

.d-field-label-wrapper {
  display: flex;
  align-items: center;

  .d-field-label {
    font-weight: 500;
    margin-bottom: 4px;
    margin-right: 4px;
    font-family: var(--d-font-stacks);
  }
}

.d-field-input-wrapper {
  position: relative;
  background-color: var(--d-color-neutral-00);
  padding: 9px 16px;
  min-height: 40px;
  border-radius: 4px;
  border: 1px solid var(--d-color-neutral-30);
  color: var(--d-color-neutral-80);
  width: 100%;
  display: flex;
  align-items: center;
  flex: 1;

  &.no-style {
    background-color: unset;
    padding: unset;
    min-height: unset;
    border-radius: unset;
    border: unset;
    color: unset;
  }

  &::placeholder {
    color: var(--d-color-neutral-30);
  }

  &.d-field-focus {
    border-color: var(--d-color-red-20);
    outline: none;
  }

  .d-field-prefix {
    margin-right: 10px;
  }

  .d-field-suffix {
    margin-left: 10px;
  }

  .d-field-prefix-inline {
    display: flex;
    align-items: center;
  }

  .d-field-suffix-inline {
    display: flex;
    align-items: center;
  }

  .d-field-prefix-border-block {
    display: flex;
    align-items: center;
    margin-left: -16px;
    margin-right: 16px;
    margin-top: -9px;
    margin-bottom: -9px;
    min-height: 38px;
    padding: 0 16px;
    border-right: 1px solid;
    border-color: inherit;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
  }

  .d-field-suffix-border-block {
    display: flex;
    align-items: center;
    margin-right: -16px;
    margin-left: 16px;
    margin-top: -9px;
    margin-bottom: -9px;
    min-height: 38px;
    padding: 0 16px;
    border-left: 1px solid;
    border-color: inherit;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
  }

  .d-field-prefix-block {
    margin-left: -17px;
    margin-right: 16px;
    margin-top: -10px;
    margin-bottom: -10px;
    min-height: 40px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
    min-width: fit-content;
  }

  .d-field-suffix-block {
    margin-right: -17px;
    margin-left: 16px;
    margin-top: -10px;
    margin-bottom: -10px;
    min-height: 40px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
    min-width: fit-content;
  }

  .d-field-prefix-border-block-inside {
    @extend .d-field-prefix-block;
    min-height: 38px;
    margin-left: -16px;
    margin-right: 16px;
    margin-top: -9px;
    margin-bottom: -9px;
    border-right: 1px solid;
    border-color: inherit;
    .d-field-input-wrapper {
      background-color: transparent;
      border-radius: 0;
      min-height: 38px;
      padding-top: 8px;
      padding-bottom: 8px;
    }
  }

  .d-field-suffix-border-block-inside {
    @extend .d-field-suffix-block;
    min-height: 38px;
    margin-right: -16px;
    margin-left: 16px;
    margin-top: -9px;
    margin-bottom: -9px;
    border-left: 1px solid;
    border-color: inherit;
    .d-field-input-wrapper {
      background-color: transparent;
      border-radius: 0;
      min-height: 38px;
      padding-top: 8px;
      padding-bottom: 8px;
    }
  }

  .d-field-prefix-use-background,
  .d-field-suffix-use-background {
    background-color: var(--d-color-neutral-20);
  }

  // Select component as prefix/suffix
  .d-select-arrow {
    margin-left: 4px;
    &.left {
      margin-right: 4px;
    }
  }
}

.d-form-field-error {
  > .d-field-input-wrapper:not(.no-style) {
    background-color: var(--d-color-red-05);
    border-color: var(--d-color-red-70);
  }
}

.d-form-field-success.d-field-show-success {
  > .d-field-input-wrapper:not(.no-style) {
    background-color: var(--d-color-green-05);
    border-color: var(--d-color-green-70);
  }
}

.d-field-helper-text {
  margin-top: 4px;
  font-family: var(--d-font-stacks);

  doku-field-hint {
    color: var(--d-color-neutral-70);
  }

  doku-field-error {
    color: var(--d-color-red-70);
  }

  doku-field-success {
    color: var(--d-color-green-70);
  }
}

.d-field-readonly {
  > .d-field-input-wrapper:not(.no-style) {
    background-color: var(--d-color-neutral-20);
    border-color: var(--d-color-neutral-30);
    color: var(--d-color-neutral-70);
    .d-field-input {
      color: var(--d-color-neutral-70);
    }
  }

  .d-field-prefix-block,
  .d-field-suffix-block {
    &:not(.d-field-prefix-border-block-inside, .d-field-prefix-border-block-inside),
    > * {
      background-color: transparent;
      border-color: transparent;
      box-shadow: none;
      cursor: inherit;
      color: var(--d-color-neutral-30);
    }
  }
}

.d-field-disabled {
  > .d-field-input-wrapper:not(.no-style) {
    background-color: var(--d-color-neutral-20);
    border-color: var(--d-color-neutral-30);
    color: var(--d-color-neutral-40);
    cursor: not-allowed;

    .d-field-input,
    .d-select-value {
      color: var(--d-color-neutral-40);
      cursor: inherit;
      &::placeholder {
        color: var(--d-color-neutral-30);
      }
    }

    .d-select-arrow {
      color: var(--d-color-neutral-40);
    }

    .d-field-prefix-border-block,
    .d-field-suffix-border-block {
      &,
      > * {
        background-color: transparent;
        border-color: var(--d-color-neutral-30);
        box-shadow: none;
        cursor: inherit;
        color: var(--d-color-neutral-30);
      }
    }

    .d-field-prefix-block,
    .d-field-suffix-block {
      &:not(.d-field-prefix-border-block-inside, .d-field-prefix-border-block-inside),
      > * {
        background-color: transparent;
        border-color: transparent;
        box-shadow: none;
        cursor: inherit;
        color: var(--d-color-neutral-30);
      }
    }
  }

  doku-field-hint,
  doku-field-error,
  doku-field-success {
    color: var(--d-color-neutral-40);
  }
}