/**
 * Outputs the selectors and properties for the TextArea component.
 *
 * @param {string} $primary-stylename (v-textarea) - the primary style name for the selectors
 * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
 *
 * @group textarea
 */
@mixin valo-textarea ($primary-stylename: v-textarea, $include-additional-styles: contains($v-included-additional-styles, textarea)) {

  .#{$primary-stylename} {
    @include valo-textarea-style;
    width: $v-default-field-width;
  }

  .#{$primary-stylename}-readonly {
    @include valo-textfield-readonly-style;
  }

  .#{$primary-stylename}-error {
    @include valo-textfield-error-style;
  }


  @if $include-additional-styles {
    .#{$primary-stylename}-borderless {
      @include valo-textfield-borderless-style;
    }

    .#{$primary-stylename}-tiny {
      @include valo-textarea-style($unit-size: $v-unit-size--tiny, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
      font-size: $v-font-size--tiny;
    }

    .#{$primary-stylename}-small {
      @include valo-textarea-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
      font-size: $v-font-size--small;
    }

    .#{$primary-stylename}-large {
      @include valo-textarea-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
      font-size: $v-font-size--large;
    }

    .#{$primary-stylename}-huge {
      @include valo-textarea-style($unit-size: $v-unit-size--huge, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
      font-size: $v-font-size--huge;
    }

    .#{$primary-stylename}-align-right {
      text-align: right;
    }

    .#{$primary-stylename}-align-center {
      text-align: center;
    }
  }

}


/**
 * Outputs the styles for a text area variant.
 *
 * @param {size} $unit-size ($v-unit-size) - The sizing of the text area, which corresponds its height
 * @param {size | list} $padding (null) - The padding of the text area. Computed from other parameters by default.
 * @param {color} $font-color (null) - The font color of the text area. Computed from the $background-color by default.
 * @param {number} $font-weight (max(400, $v-font-weight)) - The font weight of the text area
 * @param {size} $font-size (null) - The font size of the text area. Inherited from the parent by default.
 * @param {color} $background-color ($v-textfield-background-color) - The background color of the text area
 * @param {list} $border ($v-textfield-border) - The border of the text area
 * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the text area
 * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
 * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
 * @param {list} $states (normal focus disabled) - The text area states for which to output corresponding styles
 *
 * @group textfield
 */
@mixin valo-textarea-style (
    $unit-size        : $v-unit-size,
    $padding          : round($v-unit-size/6),

    $font-color       : null,
    $font-weight      : max(400, $v-font-weight),
    $font-size        : null,

    $background-color : $v-textfield-background-color,
    $border           : $v-textfield-border,
    $border-radius    : $v-textfield-border-radius,

    $bevel            : $v-textfield-bevel,
    $shadow           : $v-textfield-shadow,

    $states           : (normal, focus, disabled)
  ) {

  @include valo-textfield-style($unit-size: $unit-size, $padding: $padding,
                                $font-color: $font-color,
                                $font-weight: $font-weight,
                                $font-size: $font-size,

                                $background-color: $background-color,
                                $border: $border,
                                $border-radius: $border-radius,

                                $bevel: $bevel,
                                $shadow: $shadow,

                                $states: $states);
  height: auto;
  resize: none;
  white-space: pre-wrap; // Restore default, because .v-widget sets it to normal

}