_mixins.scss

//
// Copyright 2017 Google Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
//

@import "@material/density/functions";
@import "@material/floating-label/mixins";
@import "@material/line-ripple/mixins";
@import "@material/notched-outline/mixins";
@import "@material/notched-outline/variables";
@import "@material/theme/mixins";
@import "@material/shape/mixins";
@import "@material/shape/functions";
@import "helper-text/mixins";
@import "character-counter/mixins";
@import "icon/mixins";
@import "icon/variables";
@import "./variables";
@import "./functions";

///
/// Sets density scale for default text field variant.
///
/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,
///     `-3`, `-2`, `-1`, `0`. Default is `0`.
///
@mixin mdc-text-field-density($density-scale) {
  $height: mdc-density-prop-value(
    $density-config: $mdc-text-field-density-config,
    $density-scale: $density-scale,
    $property-name: height,
  );

  @include mdc-text-field-height($height);
}

///
/// Sets density scale for outlined text field (Excluding outlined text field with leading icon).
///
/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,
///     `-3`, `-2`, `-1`, `0`. Default is `0`.
///
@mixin mdc-text-field-outlined-density($density-scale) {
  $height: mdc-density-prop-value(
    $density-config: $mdc-text-field-density-config,
    $density-scale: $density-scale,
    $property-name: height,
  );

  @include mdc-text-field-outlined-height($height);
}

///
/// Sets density scale for outlined text field with leading icon.
///
/// @param {Number | String} $density-scale - Density scale value for component. Supported density scale values `-4`,
///     `-3`, `-2`, `-1`, `0`. Default is `0`.
///
@mixin mdc-text-field-outlined-with-leading-icon-density($density-scale) {
  $height: mdc-density-prop-value(
    $density-config: $mdc-text-field-density-config,
    $density-scale: $density-scale,
    $property-name: height,
  );

  @include mdc-text-field-outlined-with-leading-icon-height($height);
}

///
/// Sets height of default text field variant.
///
/// @param {Number} $height
/// @access public
///
@mixin mdc-text-field-height($height) {
  height: $height;

  // Target only dense text field.
  @if $height <= 40px {
    // Target only IE 11.
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .mdc-text-field__input {
        // Set line-height to the height of input element excluding padding & border.
        line-height:
          $height
          - $mdc-text-field-input-padding-top
          - $mdc-text-field-input-padding-bottom
          - $mdc-text-field-input-border-bottom;
      }
    }
  }
}

///
/// Sets height of outlined text field variant (Excluding outlined text field with leading icon).
///
/// @param {Number} $height
/// @access public
///
@mixin mdc-text-field-outlined-height($height) {
  $keyframe-suffix: text-field-outlined-#{$height};
  $positionY: mdc-text-field-get-outlined-label-position-y($height);

  @include mdc-notched-outline-floating-label-float-position-absolute($positionY);

  @at-root {
    @include mdc-floating-label-shake-keyframes($keyframe-suffix, $positionY);
  }

  @include mdc-floating-label-shake-animation($keyframe-suffix);
  @include mdc-text-field-height($height);
}

///
/// Sets height of outlined text field with leading icon variant.
///
/// @param {Number} $height
/// @access public
///
@mixin mdc-text-field-outlined-with-leading-icon-height($height) {
  $keyframe-suffix: text-field-outlined-with-leading-icon-#{$height};
  $positionY: mdc-text-field-get-outlined-label-position-y($height);

  // For specificity
  &.mdc-text-field--outlined {
    @include mdc-notched-outline-floating-label-float-position-absolute($positionY, 32px);
  }

  @at-root {
    @include mdc-floating-label-shake-keyframes(
      $keyframe-suffix,
      $positionY,
      $mdc-text-field-outlined-with-leading-icon-label-position-x
    );
  }

  @include mdc-floating-label-shake-animation($keyframe-suffix);

  $keyframe-suffix-rtl: #{$keyframe-suffix}-rtl;

  @at-root {
    @include mdc-floating-label-shake-keyframes(
      $keyframe-suffix-rtl,
      $positionY,
      -$mdc-text-field-outlined-with-leading-icon-label-position-x
    );
  }

  @include mdc-rtl {
    @include mdc-floating-label-shake-animation($keyframe-suffix);
  }

  @include mdc-text-field-height($height);
}

///
/// Sets shape radius of default text field variant.
///
/// @param {Number} $radius Shape radius value in `px` or in percentage.
/// @param {Number} $text-field-height Height of default text field variant. Required only when `$radius` is in
///     percentage unit and if text field has custom height. Defaults to `$mdc-text-field-height`.
/// @param {Boolean} $rtl-reflexive Set to true to flip shape radius in RTL context. Defaults to `false`.
///
@mixin mdc-text-field-shape-radius($radius, $density-scale: $mdc-text-field-density-scale, $rtl-reflexive: false) {
  @if length($radius) > 2 {
    @error "Invalid radius: '#{$radius}' component doesn't allow customizing all corners";
  }

  $height: mdc-density-prop-value(
    $density-config: $mdc-text-field-density-config,
    $density-scale: $density-scale,
    $property-name: height,
  );

  $masked-radius: mdc-shape-mask-radius($radius, 1 1 0 0);

  @include mdc-shape-radius(
    mdc-shape-resolve-percentage-radius($height, $masked-radius),
    $rtl-reflexive
  );
}

@mixin mdc-text-field-textarea-shape-radius($radius, $rtl-reflexive: false) {
  @include mdc-notched-outline-shape-radius($radius, $rtl-reflexive);
}

///
/// Customizes the color of the text entered into an enabled text field.
/// @param {Color} $color - The desired input text color.
///
@mixin mdc-text-field-ink-color($color) {
  @include mdc-text-field-if-enabled_ {
    @include mdc-text-field-ink-color_($color);
  }
}

///
/// Customizes the color of the entered text in a disabled text field.
/// @param {Color} $color - The desired input text color.
///
@mixin mdc-text-field-disabled-ink-color($color) {
  @include mdc-text-field-if-disabled_ {
    @include mdc-text-field-ink-color_($color);
  }
}

///
/// Customizes the background color of the text field or textarea when enabled.
/// @param {Color} $color - The desired background color.
///
@mixin mdc-text-field-fill-color($color) {
  @include mdc-text-field-if-enabled_ {
    @include mdc-text-field-fill-color_($color);
  }
}

///
/// Customizes the background color of the text field or textarea when disabled.
/// @param {Color} $color - The desired label text color.
///
@mixin mdc-text-field-disabled-fill-color($color) {
  @include mdc-text-field-if-disabled_ {
    @include mdc-text-field-fill-color_($color);
  }
}

///
/// Customizes the text field bottom line color for the filled variant.
/// @param {Color} $color - The desired bottom line color.
///
@mixin mdc-text-field-bottom-line-color($color) {
  @include mdc-text-field-if-enabled_ {
    @include mdc-text-field-bottom-line-color_($color);
  }
}

///
/// Customizes the disabled text field bottom line color for the filled variant.
/// @param {Color} $color - The desired bottom line color.
///
@mixin mdc-text-field-disabled-bottom-line-color($color) {
  @include mdc-text-field-if-disabled_ {
    @include mdc-text-field-bottom-line-color_($color);
  }
}

///
/// Customizes the hover text field bottom line color for the filled variant.
/// @param {Color} $color - The desired bottom line color.
///
@mixin mdc-text-field-hover-bottom-line-color($color) {
  @include mdc-text-field-if-enabled_ {
    @include mdc-text-field-hover-bottom-line-color_($color);
  }
}

///
/// Customizes the color of the default line ripple of the text field.
/// @param {Color} $color - The desired line ripple color.
///
@mixin mdc-text-field-line-ripple-color($color) {
  @include mdc-text-field-if-enabled_ {
    @include mdc-text-field-line-ripple-color_($color);
  }
}

///
/// Customizes the text color of the label in an enabled text field.
/// @param {Color} $color - The desired label text color.
///
@mixin mdc-text-field-label-color($color) {
  @include mdc-text-field-if-enabled_ {
    @include mdc-text-field-label-ink-color_($color);
  }
}

///
/// Customizes the text color of the label in a disabled text field.
/// @param {Color} $color - The desired label text color.
///
@mixin mdc-text-field-disabled-label-color($color) {
  @include mdc-text-field-if-disabled_ {
    @include mdc-text-field-label-ink-color_($color);
  }
}

///
/// Customizes the border color of the outlined text field or textarea.
/// @param {Color} $color - The desired outline border color.
///
@mixin mdc-text-field-outline-color($color) {
  @include mdc-text-field-if-enabled_ {
    @include mdc-notched-outline-color($color);
  }
}

///
/// Customizes the outline border color when the text field or textarea is hovered.
/// @param {Color} $color - The desired outline border color.
///
@mixin mdc-text-field-hover-outline-color($color) {
  @include mdc-text-field-if-enabled_ {
    @include mdc-text-field-hover-outline-color_($color);
  }
}

///
/// Customizes the outline border color when the text field or textarea is focused.
/// @param {Color} $color - The desired outline border color.
///
@mixin mdc-text-field-focused-outline-color($color) {
  @include mdc-text-field-if-enabled_ {
    @include mdc-text-field-focused-outline-color_($color);
  }
}

///
/// Customizes the outline border color when the text field or textarea is disabled.
/// @param {Color} $color - The desired outline border color.
///
@mixin mdc-text-field-disabled-outline-color($color) {
  @include mdc-text-field-if-disabled_ {
    @include mdc-notched-outline-color($color);
  }
}

///
/// Customizes the caret color of the text field or textarea.
/// @param {Color} $color - The desired caret color.
///
@mixin mdc-text-field-caret-color($color) {
  .mdc-text-field__input {
    @include mdc-theme-prop(caret-color, $color);
  }
}

// Private mixins

// Baseline

@mixin mdc-text-field-disabled_ {
  @include mdc-text-field-bottom-line-color_($mdc-text-field-disabled-border);
  @include mdc-text-field-ink-color_($mdc-text-field-disabled-ink-color);
  @include mdc-text-field-label-ink-color_($mdc-text-field-disabled-label-color);
  @include mdc-text-field-helper-text-color_($mdc-text-field-disabled-helper-text-color);
  @include mdc-text-field-character-counter-color_($mdc-text-field-disabled-helper-text-color);
  @include mdc-text-field-icon-color_($mdc-text-field-disabled-icon);
  @include mdc-text-field-fill-color_($mdc-text-field-disabled-background);

  border-bottom: none;
  pointer-events: none;

  .mdc-floating-label {
    cursor: default;
  }
}

@mixin mdc-text-field-invalid_ {
  @include mdc-text-field-bottom-line-color($mdc-text-field-error);
  @include mdc-text-field-hover-bottom-line-color($mdc-text-field-error);
  @include mdc-text-field-line-ripple-color($mdc-text-field-error);
  @include mdc-text-field-label-color($mdc-text-field-error);
  @include mdc-text-field-helper-text-validation-color($mdc-text-field-error);
  @include mdc-text-field-caret-color($mdc-text-field-error);

  &.mdc-text-field--with-trailing-icon {
    &:not(.mdc-text-field--with-leading-icon) {
      @include mdc-text-field-icon-color($mdc-text-field-error);
    }

    &.mdc-text-field--with-leading-icon {
      @include mdc-text-field-icon-color($mdc-text-field-error, /* styleSecondIcon */ true);
    }
  }

  + .mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
    opacity: 1;
  }
}

@mixin mdc-text-field-focused_ {
  @include mdc-text-field-label-color($mdc-text-field-focused-label-color);

  + .mdc-text-field-helper-line .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg) {
    opacity: 1;
  }
}

@mixin mdc-text-field-dense_ {
  @include mdc-floating-label-float-position(
    $mdc-text-field-dense-label-position-y,
    0%,
    $mdc-text-field-dense-label-scale
  );
  @include mdc-floating-label-shake-animation(text-field-dense);

  .mdc-text-field__input {
    padding: 12px 12px 0;
  }

  .mdc-floating-label {
    font-size: .813rem;

    &--float-above {
      font-size: .813rem;
    }
  }
}

@mixin mdc-required-text-field-label-asterisk_() {
  .mdc-text-field__input:required ~ {
    .mdc-floating-label::after,
    .mdc-notched-outline .mdc-floating-label::after {
      @content;
    }
  }
}

///
/// Sets shape radius of outlined text field variant.
///
/// @param {Number} $radius Shape radius value in `px` or in percentage.
/// @param {Number} $text-field-height Height of outlined text field variant. Required only when `$radius` is in
///     percentage unit and if text field has custom height. Defaults to `$mdc-text-field-height`.
/// @param {Boolean} $rtl-reflexive Set to true to flip shape radius in RTL context. Defaults to `false`.
///
@mixin mdc-text-field-outline-shape-radius(
  $radius,
  $density-scale: $mdc-text-field-density-scale,
  $rtl-reflexive: false) {
  $height: mdc-density-prop-value(
    $density-config: $mdc-text-field-density-config,
    $density-scale: $density-scale,
    $property-name: height,
  );

  // stylelint-disable-next-line max-line-length
  $resolved-radius: nth(mdc-shape-resolve-percentage-radius($height, mdc-shape-prop-value($radius)), 1);

  @if (length(mdc-shape-prop-value($radius)) > 1) {
    // stylelint-disable max-line-length
    @warn "mdc-text-field-outline-shape-radius only supports a single radius; see https://github.com/material-components/material-components-web/issues/4140";
    // stylelint-enable
  }

  .mdc-notched-outline {
    @include mdc-notched-outline-shape-radius($resolved-radius, $rtl-reflexive);
  }

  @if ($resolved-radius > $mdc-notched-outline-leading-width) {
    .mdc-text-field__input {
      @include mdc-rtl-reflexive-property(padding, $resolved-radius + $mdc-notched-outline-padding, 0);
    }

    + .mdc-text-field-helper-line {
      @include mdc-rtl-reflexive-property(padding, $resolved-radius + $mdc-notched-outline-padding, $resolved-radius);
    }
  }
}

@mixin mdc-text-field-floating-label_ {
  .mdc-floating-label {
    @include mdc-rtl-reflexive-position(left, $mdc-text-field-label-offset);

    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }

  // Include these mixins to override above `transform` property.
  //TODO: Remove these from here when floating label is center aligned in all position - this lowers specificity.
  @include mdc-floating-label-float-position($mdc-text-field-label-position-y);

  &--textarea {
    .mdc-floating-label {
      @include mdc-rtl-reflexive-position(left, $mdc-notched-outline-padding);
    }
  }

  &--outlined {
    .mdc-floating-label {
      @include mdc-rtl-reflexive-position(left, $mdc-notched-outline-padding);
    }

    &--with-leading-icon {
      .mdc-floating-label {
        @include mdc-rtl-reflexive-position(left, ($mdc-text-field-icon-padding - $mdc-notched-outline-leading-width));

        &--float-above {
          @include mdc-rtl-reflexive-position(
            left,
            ($mdc-text-field-icon-padding - $mdc-notched-outline-leading-width) + $mdc-notched-outline-padding
          );
        }
      }
    }
  }
}

// Outlined

@mixin mdc-text-field-outlined-disabled_ {
  @include mdc-notched-outline-color($mdc-text-field-outlined-disabled-border);
  @include mdc-text-field-fill-color_(transparent);

  .mdc-text-field__input {
    border-bottom: none;
  }
}

@mixin mdc-text-field-outlined-invalid_ {
  @include mdc-text-field-outline-color($mdc-text-field-error);
  @include mdc-text-field-hover-outline-color($mdc-text-field-error);
  @include mdc-text-field-focused-outline-color($mdc-text-field-error);
}

@mixin mdc-text-field-outlined-focused_ {
  @include mdc-notched-outline-stroke-width($mdc-text-field-outlined-stroke-width);
}

@mixin mdc-text-field-outlined-dense_ {
  @include mdc-notched-outline-floating-label-float-position(
    $mdc-text-field-outlined-dense-label-position-y,
    0%,
    $mdc-text-field-dense-label-scale
  );
  @include mdc-floating-label-shake-animation(text-field-outlined-dense);

  height: 48px;

  .mdc-text-field__input {
    padding: 12px 12px 7px;
  }

  .mdc-floating-label {
    top: 14px;
  }

  .mdc-text-field__icon {
    top: 12px;
  }
}

@mixin mdc-text-field-outlined_ {
  @include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
  @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
  @include mdc-text-field-focused-outline-color(primary);
  @include mdc-floating-label-shake-animation(text-field-outlined);
  @include mdc-text-field-outline-shape-radius(small);
  @include mdc-notched-outline-floating-label-float-position-absolute($mdc-text-field-outlined-label-position-y);
  @include mdc-notched-outline-notch-offset($mdc-notched-outline-border-width);
  @include mdc-states-base-color(transparent);
  @include mdc-text-field-fill-color(transparent);

  border: none;
  overflow: visible;

  .mdc-text-field__input {
    display: flex;
    padding: 12px 16px 14px;
    border: none !important; // FF adds unwanted border in HC mode on windows.
    background-color: transparent;
    z-index: 1;
  }

  .mdc-text-field__icon {
    z-index: 2;
  }

  &.mdc-text-field--focused {
    @include mdc-notched-outline-notch-offset($mdc-text-field-outlined-stroke-width);
  }
}

@mixin mdc-text-field-hover-outline-color_($color) {
  &:not(.mdc-text-field--focused) {
    // stylelint-disable-next-line selector-combinator-space-after
    .mdc-text-field__input:hover ~,
    .mdc-text-field__icon:hover ~ {
      .mdc-notched-outline {
        @include mdc-notched-outline-color($color);
      }
    }
  }
}

@mixin mdc-text-field-focused-outline-color_($color) {
  &.mdc-text-field--focused {
    @include mdc-notched-outline-color($color);
  }
}

// Icons

@mixin mdc-text-field-with-leading-icon_ {
  @include mdc-text-field-icon-horizontal-position_(
    left,
    $mdc-text-field-icon-position,
    $mdc-text-field-icon-padding,
    $mdc-text-field-input-padding
  );

  .mdc-floating-label {
    @include mdc-rtl-reflexive-position(left, $mdc-text-field-icon-padding);
  }
}

@mixin mdc-text-field-dense-with-leading-icon_ {
  @include mdc-text-field-icon-horizontal-position_(
    left,
    $mdc-text-field-dense-icon-position,
    $mdc-text-field-dense-icon-padding,
    $mdc-text-field-input-padding
  );

  .mdc-floating-label {
    @include mdc-rtl-reflexive-position(left, $mdc-text-field-dense-icon-padding);
  }
}

@mixin mdc-text-field-outlined-with-leading-icon_ {
  @include mdc-text-field-icon-horizontal-position_(
    left,
    $mdc-text-field-icon-position,
    $mdc-text-field-icon-padding,
    $mdc-text-field-input-padding
  );
  @include mdc-notched-outline-floating-label-float-position-absolute($mdc-text-field-outlined-label-position-y, 32px);
  @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon);

  @include mdc-rtl {
    @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-rtl);
  }

  .mdc-floating-label {
    @include mdc-rtl-reflexive-position(left, $mdc-text-field-icon-padding - $mdc-notched-outline-leading-width);
  }
}

@mixin mdc-text-field-outlined-dense-with-leading-icon_ {
  @include mdc-notched-outline-floating-label-float-position(
    $mdc-text-field-outlined-dense-label-position-y,
    $mdc-text-field-outlined-dense-with-leading-icon-label-position-x,
    $mdc-text-field-dense-label-scale
  );
  @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense);

  @include mdc-rtl {
    @include mdc-floating-label-shake-animation(text-field-outlined-leading-icon-dense-rtl);
  }

  .mdc-floating-label {
    @include mdc-rtl-reflexive-position(left, $mdc-text-field-dense-icon-padding - $mdc-notched-outline-leading-width);
  }
}

@mixin mdc-text-field-with-trailing-icon_ {
  @include mdc-text-field-icon-horizontal-position_(
    right,
    $mdc-text-field-trailing-icon-position,
    $mdc-text-field-icon-padding,
    $mdc-text-field-input-padding
  );

  // Outlined uses 16px for text alignment when using a trailing icon.
  &.mdc-text-field--outlined {
    @include mdc-text-field-icon-horizontal-position_(
      right,
      $mdc-text-field-icon-position,
      $mdc-text-field-icon-padding,
      $mdc-text-field-input-padding
    );
  }
}

@mixin mdc-text-field-dense-with-trailing-icon_ {
  @include mdc-text-field-icon-horizontal-position_(
    right,
    $mdc-text-field-dense-icon-position,
    $mdc-text-field-dense-icon-padding,
    $mdc-text-field-input-padding
  );
}

@mixin mdc-text-field-with-both-icons_ {
  @include mdc-text-field-icon-horizontal-position-two-icons_(
    $mdc-text-field-icon-position,
    $mdc-text-field-icon-padding,
    $mdc-text-field-trailing-icon-position,
    $mdc-text-field-icon-padding
  );
}

@mixin mdc-text-field-dense-with-both-icons_ {
  @include mdc-text-field-icon-horizontal-position-two-icons_(
    $mdc-text-field-dense-icon-position,
    $mdc-text-field-dense-icon-padding,
    $mdc-text-field-dense-icon-position,
    $mdc-text-field-dense-icon-padding
  );
}

// Full Width
@mixin mdc-text-field-fullwidth_ {
  @include mdc-text-field-bottom-line-color($mdc-text-field-bottom-line-idle);
  @include mdc-text-field-disabled-bottom-line-color($mdc-text-field-bottom-line-idle);

  width: 100%;

  &:not(.mdc-text-field--textarea) {
    @include mdc-states-base-color(transparent);
    @include mdc-text-field-fill-color(transparent);

    display: block;

    .mdc-text-field__input {
      padding: 0;
    }
  }

  &.mdc-text-field--textarea .mdc-text-field__input {
    resize: vertical;
  }
}

@mixin mdc-text-field-fullwidth-invalid_ {
  @include mdc-text-field-bottom-line-color($mdc-text-field-error);
}

// Textarea
@mixin mdc-text-field-textarea-disabled_ {
  @include mdc-text-field-outlined-disabled_;
  /* @alternate */
  @include mdc-text-field-fill-color_($mdc-textarea-disabled-background);
}

@mixin mdc-text-field-textarea-invalid_ {
  @include mdc-text-field-outline-color($mdc-text-field-error);
  @include mdc-text-field-hover-outline-color($mdc-text-field-error);
  @include mdc-text-field-focused-outline-color($mdc-text-field-error);
}

@mixin mdc-text-field-textarea_ {
  // Note: The refactor to add the filled textarea style will result in a lot of the specificity issues that the
  // textarea has being resolved by using the same --outlined variant class as the text field.
  @include mdc-text-field-outline-color($mdc-text-field-outlined-idle-border);
  @include mdc-text-field-hover-outline-color($mdc-text-field-outlined-hover-border);
  @include mdc-text-field-focused-outline-color(primary);
  @include mdc-floating-label-shake-animation(textarea);
  @include mdc-text-field-outline-shape-radius(small);
  @include mdc-states-base-color(transparent);
  @include mdc-text-field-fill-color(transparent);
  @include mdc-notched-outline-floating-label-float-position($mdc-text-field-textarea-label-position-y);
  @include mdc-text-field-character-counter-position(16px, 13px);

  $padding-inset: 16px;

  display: inline-flex;
  width: auto;
  height: auto;
  transition: none;
  overflow: visible;

  .mdc-text-field__input {
    align-self: auto;
    box-sizing: border-box;
    height: auto;
    margin: $padding-inset/2 1px 1px 0;
    padding: 0 $padding-inset $padding-inset;
    border: none;
    line-height: 1.75rem; // 28sp
  }

  .mdc-text-field-character-counter + .mdc-text-field__input {
    margin-bottom: 28px; // Leaves space for character counter if it exists.
    padding-bottom: 0;
  }

  .mdc-floating-label {
    top: 17px;
    width: auto;
    pointer-events: none;

    // Resets center aligning the floating label.
    &:not(.mdc-floating-label--float-above) {
      transform: none;
    }
  }

  &.mdc-text-field--focused {
    @include mdc-text-field-outlined-focused_;
  }
}

// Customization

@mixin mdc-text-field-ink-color_($color) {
  .mdc-text-field__input {
    @include mdc-theme-prop(color, $color);
  }
}

@mixin mdc-text-field-fill-color_($color) {
  @include mdc-theme-prop(background-color, $color);
}

@mixin mdc-text-field-bottom-line-color_($color) {
  .mdc-text-field__input {
    @include mdc-theme-prop(border-bottom-color, $color);
  }
}

@mixin mdc-text-field-hover-bottom-line-color_($color) {
  .mdc-text-field__input:hover {
    @include mdc-theme-prop(border-bottom-color, $color);
  }
}

@mixin mdc-text-field-line-ripple-color_($color) {
  .mdc-line-ripple {
    @include mdc-line-ripple-color($color);
  }
}

@mixin mdc-text-field-label-ink-color_($color) {
  .mdc-floating-label {
    @include mdc-floating-label-ink-color($color);
  }
}

// State qualifiers

///
/// Helps style the text-field only when it's enabled.
/// @access private
///
@mixin mdc-text-field-if-enabled_ {
  &:not(.mdc-text-field--disabled) {
    @content;
  }
}

///
/// Helps style the text-field only when it's disabled.
/// @access private
///
@mixin mdc-text-field-if-disabled_ {
  &.mdc-text-field--disabled {
    @content;
  }
}