@import "../../styles/variables.scss";

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.textareaWrapper {
  position: relative;
  display: flex;
  flex-grow: 1;

  /* added this to avoid bug where the top and right :active border disappeared */
  padding: $base-spacing;
  margin: -$base-spacing;
}

.textarea {
  resize: vertical;
  flex-grow: 1;
  width: 100%;
  min-height: 100px;
  overflow: auto;
  background-color: $base-input-background;
  border: $base-border;
  border-radius: $base-border-radius;
  font-size: $body-font-size;
  font-family: inherit;
  padding: $base-spacing;

  &::placeholder {
    color: $brand-grey;
  }
}

.overlay {
  position: absolute;
  top: $base-spacing;
  right: $base-spacing;
  margin-top: $base-spacing;
  margin-right: $base-spacing;
  border: $base-border;
  border-radius: $base-border-radius;
  background: $brand-white;
  padding: $s-spacing;
}

.textarea:focus {
  border-color: transparent;
  background: $brand-white;
  box-shadow: 0 0 0 2px $brand-blue;
  outline: none;
}

.error {
  border-color: transparent;
  box-shadow: 0 0 0 2px $brand-destructive;
  outline: none;
}

.inputHelpText {
  padding-top: $base-spacing;
}

.disabled {
  background-color: $brand-nearWhite;
  border: none;

  &::placeholder {
    color: $brand-lightGrey;
  }
}

.resizeNone {
  resize: none;
}