.#{$n}-input {
  display: flex;
}

.#{$n}-entry-form {
  display: flex;
  flex: 0 1 100%;
  align-items: flex-end;
  gap: $spacer * 0.25;
  max-width: 100%;
  height: auto;
  transition: max-width $transition;
}

.#{$n}-input--text__container {
  display: flex;
  position: relative;
  flex: 1 1 100%;
  width: fit-content;
  max-width: calc(100% - #{$buttonsize} - #{$spacer * 0.25});
}

.#{$n}-upload-toggle-wrapper.#{$n}-transition--in ~ .#{$n}-entry-form {
  max-width: calc(100% - #{$buttonsize} - #{$spacer * 0.25});
}

.#{$n}-entry-form .#{$n}-form-control__wrapper {
  /* THIS IS FOR THE LABEL */
  display: flex;
  flex-direction: column;
  gap: $spacer * 0.25;
  width: 100%;
}

.#{$n}-input__text {
  appearance: none;
  flex: 1 1 100%;
  width: 100%;
  margin: 0;
  padding: $spacer * 0.25 $spacer * 0.5;
  transition: padding $transition;
  border: $thin-border solid $grey-b;
  border-radius: $borderradius-small;
  color: $grey-e;
  font-size: $fontsize-default;

  @include stylePlaceholder {
    color: $grey-c;
  }
}

input.#{$n}-input__text {
  min-height: $buttonsize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  @include stylePlaceholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

textarea.#{$n}-input__text {
  min-height: calc(4lh + 1rem);
  hyphens: auto;
  resize: none;
  scrollbar-color: initial transparent;
  scrollbar-width: thin;

  &::-webkit-scrollbar {
    background-color: transparent;
  }

  @supports (field-sizing: content) {
    field-sizing: content;
    min-height: $buttonsize;
    max-height: calc(4lh + 1rem);
    padding-top: $spacer * 0.35;
  }
}

.#{$n}-character-warning .#{$n}-input__text,
.#{$n}-character-exceeded .#{$n}-input__text {
  padding-right: $spacer * 2;
}

.#{$n}-character-exceeded .#{$n}-input__text {
  border: $thin-border solid $negative;
}

.#{$n}-input__submit {
  display: flex;
  flex: 0 0 $buttonsize;
  align-items: center;
  justify-content: center;
  width: $buttonsize;
  height: $buttonsize;
  padding: 0;
  border-radius: $borderradius-small;

  .#{$n}-icon path {
    transition: fill $transition;
    fill: $interaction;
  }

  &[aria-disabled='true'] {
    cursor: auto;

    .#{$n}-icon path {
      fill: $grey-c;
    }
  }
}