$textarea-background-color: $gray;
$textarea-placeholder-opacity: 0.4;
$textarea-min-width: 210px;
$textarea-border-radius: 12px;

.textarea {
  border: 2px solid transparent;
  color: $darkestGray;
  background-color: $textarea-background-color;
  border-radius: $textarea-border-radius;
  padding: 7px 13px 7px 10px;
  min-width: $textarea-min-width;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;

  &::placeholder {
    opacity: $textarea-placeholder-opacity;
  }

  &:focus,
  &:focus-visible,
  &:focus-within {
    outline: none;
  }

  &:focus {
    padding-left: 15px;
  }

  @each $color, $value in $colors {
    &.#{$color} {
      &:active,
      &:focus {
        border-bottom-color: $value;
      }

      &.flat {
        background-color: tint($value, 85%);
      }

      &.bordered {
        border-bottom-color: $value;
      }
    }
  }

  &.square {
    border-radius: 0;
  }
}