//
// 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/floating-label/mixins";
@import "@material/line-ripple/mixins";
@import "@material/notched-outline/mixins";
@import "@material/theme/mixins";
@import "helper-text/mixins";
@import "icon/mixins";
@import "icon/variables";
@import "./variables";

@mixin mdc-text-field-corner-radius($radius) {
  border-radius: $radius $radius 0 0;
}

@mixin mdc-text-field-textarea-corner-radius($radius) {
  border-radius: $radius;

  .mdc-floating-label {
    // Bottom corners are square to prevent weird edge cases
    // where text would be visible outside of the curve.
    border-radius: $radius $radius 0 0;
  }

  .mdc-text-field__input {
    // The input element is required to have 2 pixels shaved off
    // of the radius of its parent. This prevents an ugly space of
    // background between the two borders in each corner when the
    // textarea is focused. This also means we need to guard against
    // invalid output.
    border-radius: max($radius - 2, 0);
  }
}

@mixin mdc-text-field-ink-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-ink-color_($color);
  }
}

@mixin mdc-text-field-fill-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-fill-color_($color);
  }
}

@mixin mdc-text-field-textarea-stroke-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-textarea-stroke-color_($color);
  }
}

@mixin mdc-text-field-textarea-fill-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-textarea-fill-color_($color);

    // Automatically add label background color the same color as well to ensure
    // the label can be seen if the input scrolls behind the label
    .mdc-floating-label {
      @include mdc-floating-label-fill-color($color);
    }
  }
}

@mixin mdc-text-field-fullwidth-bottom-line-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-fullwidth-bottom-line-color_($color);
  }
}

@mixin mdc-text-field-bottom-line-color($color) {
  &:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) {
    @include mdc-text-field-bottom-line-color_($color);
  }
}

@mixin mdc-text-field-hover-bottom-line-color($color) {
  &:not(.mdc-text-field--disabled):not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) {
    @include mdc-text-field-hover-bottom-line-color_($color);
  }
}

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

@mixin mdc-text-field-label-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-label-ink-color_($color);
  }
}

@mixin mdc-text-field-outline-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-outline-color_($color);
  }
}

@mixin mdc-text-field-hover-outline-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-hover-outline-color_($color);
  }
}

@mixin mdc-text-field-focused-outline-color($color) {
  &:not(.mdc-text-field--disabled) {
    @include mdc-text-field-focused-outline-color_($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-icon-color_($mdc-text-field-disabled-icon);
  @include mdc-text-field-fullwidth-bottom-line-color_($mdc-text-field-fullwidth-bottom-line-color);
  @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 {
    @include mdc-text-field-icon-color($mdc-text-field-error);
  }

  + .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);

  @include mdc-required-text-field-label-asterisk_ {
    color: $mdc-text-field-error;
  }

  + .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;
  }
}

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

@mixin mdc-text-field-outline-corner-radius_($radius) {
  // NOTE: idle and notched state border radius mixins
  // are broken into 2 different mixins, otherwise
  // we would be overly specific (big no, no). The cause of
  // this is because .mdc-notched-outline and .mdc-notched-outline__idle
  // are siblings. .mdc-notched-outline__idle needs to be a child of
  // .mdc-notched-outline in order to remedy this issue.
  .mdc-notched-outline {
    @include mdc-notched-outline-corner-radius($radius);
  }

  @include mdc-notched-outline-idle-corner-radius($radius);
}

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

    bottom: 20px;
  }

  &:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) {
    .mdc-floating-label {
      // @include mdc-floating-label-max-width(calc(100% - #{$mdc-text-field-icon-padding}));
      max-width: calc(100% - #{$mdc-text-field-icon-padding});
    }
  }
}

// Outlined

@mixin mdc-text-field-outlined-disabled_ {
  @include mdc-text-field-ink-color_($mdc-text-field-placeholder);
  @include mdc-text-field-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(2px);
}

@mixin mdc-text-field-outlined-dense_ {
  @include mdc-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 {
    bottom: 16px;
  }

  .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-float-position($mdc-text-field-outlined-label-position-y);
  @include mdc-floating-label-shake-animation(text-field-outlined);
  @include mdc-text-field-outline-corner-radius_($mdc-text-field-border-radius);
  @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-floating-label {
    @include mdc-rtl-reflexive-position(left, 16px);

    width: auto;
  }
}

@mixin mdc-text-field-outline-color_($color) {
  // NOTE: outlined version of text-field wants the "idle" and
  // "notched" outline to have the same color. This covers two cases:
  // 1) text field renders with NO value in the "idle" state
  // 2) text field renders with a value in the "notched" state
  @include mdc-notched-outline-idle-color($color);
  @include mdc-notched-outline-color($color);
}

@mixin mdc-text-field-hover-outline-color_($color) {
  &:not(.mdc-text-field--focused) {
    .mdc-text-field__input:hover ~,
    .mdc-text-field__icon:hover ~ {
      @include mdc-notched-outline-idle-color($color);

      // tldr; this doesn't break BEM:
      // We need to wrap this mixin with the .mdc-notched-outline
      // selector, because of the sibling selector '~'. The notched
      // outline html structure has .mdc-notched-outline
      // and .mdc-notched-outline__idle as siblings, while
      // .mdc-notched-outline__path is a child of .mdc-notched-outline
      .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);
}

@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);
}

@mixin mdc-text-field-outlined-with-leading-icon_ {
  @include mdc-floating-label-float-position($mdc-text-field-outlined-label-position-y, $mdc-text-field-outlined-with-leading-icon-label-position-x);
  @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);
  }
}

@mixin mdc-text-field-outlined-dense-with-leading-icon_ {
  @include mdc-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);
  }
}

@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);

  // 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);
  }
}

@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);
}

// Full Width
@mixin mdc-text-field-fullwidth_ {
  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;
    }
  }
}

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

// Textarea
@mixin mdc-text-field-textarea-disabled_ {
  @include mdc-text-field-textarea-stroke-color_($mdc-textarea-disabled-border-color);
  @include mdc-text-field-textarea-fill-color_($mdc-textarea-disabled-background);

  border-bottom-width: 1px;
  border-style: solid;

  .mdc-text-field__input {
    border: 1px solid transparent;
  }

  .mdc-floating-label {
    @include mdc-floating-label-fill-color($mdc-textarea-disabled-background);
  }
}

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

@mixin mdc-text-field-textarea_ {
  @include mdc-text-field-textarea-corner-radius($mdc-text-field-border-radius);
  @include mdc-text-field-textarea-stroke-color($mdc-textarea-border);

  // Translate above the top of the input, and compensate for the amount of offset needed
  // to position the label within the bounds of the inset padding.
  @include mdc-floating-label-float-position($mdc-text-field-textarea-label-position-y, 0%, $mdc-text-field-textarea-label-scale);
  @include mdc-floating-label-shake-animation(textarea);
  @include mdc-states-base-color(transparent);
  @include mdc-text-field-fill-color(transparent);

  $padding-inset: 16px;
  $label-offset-y: $padding-inset + 2;
  $label-offset-x: $padding-inset;

  display: flex;
  width: auto;
  height: auto;
  transition: none;
  border: 1px solid;
  overflow: hidden;

  .mdc-text-field__input {
    align-self: auto;
    box-sizing: content-box;
    height: auto;
    margin: 0;
    padding: $padding-inset;
    padding-top: $padding-inset * 2;
    border: 1px solid transparent;
  }

  .mdc-floating-label {
    @include mdc-floating-label-fill-color($mdc-textarea-background);
    @include mdc-rtl-reflexive(left, 1px, right, 0);
    @include mdc-rtl-reflexive-property(margin, 8px, 0);

    top: $label-offset-y;
    bottom: auto;
    width: auto;
    margin-top: 2px;
    padding: 12px 8px 8px 8px;
    line-height: 1.15;
    pointer-events: none;
  }
}

// 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-textarea-stroke-color_($color) {
  @include mdc-theme-prop(border-color, $color);

  .mdc-text-field__input:focus {
    @include mdc-theme-prop(border-color, $color);
  }
}

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

@mixin mdc-text-field-fullwidth-bottom-line-color_($color) {
  &:not(.mdc-text-field--textarea) {
    @include mdc-theme-prop(border-bottom-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);
  }

  // CSS-only version
  .mdc-text-field__input::placeholder {
    @include mdc-theme-prop(color, $color);
  }
}