/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

// stylelint-disable selector-class-pattern --
// Selector '.mdc-*' should only be used in this project.

@use '@material/textfield/mdc-text-field';
@use '@material/textfield';
@use "@material/mwc-icon/_mwc-icon";
@use "@material/floating-label/mdc-floating-label";
@use "@material/line-ripple/mdc-line-ripple";
@use "@material/notched-outline/mdc-notched-outline";
@use "@material/ripple/common";
@use '@material/theme/theme';
@use '@material/theme/theme-color';
@use '@material/shape';

.material-icons {
  @extend %material-icons;
}

:host {
  display: inline-flex;
  flex-direction: column;
  outline: none;
}

.mdc-text-field {
  width: 100%;

  @include textfield.bottom-line-color(
    (
      varname: --mdc-text-field-idle-line-color,
      fallback: textfield.$bottom-line-idle,
    )
  );

  @include textfield.hover-bottom-line-color(
    (
      varname: --mdc-text-field-hover-line-color,
      fallback: textfield.$bottom-line-hover,
    )
  );

  @include textfield.disabled-bottom-line-color(
    (
      varname: --mdc-text-field-disabled-line-color,
      fallback: textfield.$disabled-border,
    )
  );

  &.mdc-text-field--invalid {
    @include textfield.bottom-line-color(textfield.$error);
  }
}

.mdc-text-field__input {
  direction: inherit;
}

mwc-notched-outline {
  --mdc-notched-outline-border-color: var(
    --mdc-text-field-outlined-idle-border-color,
    #{textfield.$outlined-idle-border}
  );
}

:host(:not([disabled]):hover)
  :not(.mdc-text-field--invalid):not(.mdc-text-field--focused)
  mwc-notched-outline {
  --mdc-notched-outline-border-color: var(
    --mdc-text-field-outlined-hover-border-color,
    #{textfield.$outlined-hover-border}
  );
}

:host(:not([disabled])) {
  .mdc-text-field {
    &:not(.mdc-text-field--outlined) {
      background-color: var(
        --mdc-text-field-fill-color,
        #{textfield.$background}
      );
    }

    &.mdc-text-field--invalid {
      mwc-notched-outline {
        --mdc-notched-outline-border-color: var(
          --mdc-text-field-error-color,
          var(--mdc-theme-error, #{theme-color.$error})
        );
      }

      & + .mdc-text-field-helper-line .mdc-text-field-character-counter,
      .mdc-text-field__icon {
        color: var(
          --mdc-text-field-error-color,
          var(--mdc-theme-error, #{theme-color.$error})
        );
      }
    }

    &:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) {
      .mdc-floating-label,
      .mdc-floating-label::after {
        color: var(--mdc-text-field-label-ink-color, #{textfield.$label});
      }
    }

    &.mdc-text-field--focused {
      mwc-notched-outline {
        --mdc-notched-outline-stroke-width: 2px;
      }

      &:not(.mdc-text-field--invalid) {
        mwc-notched-outline {
          --mdc-notched-outline-border-color: var(
            --mdc-text-field-focused-label-color,
            var(--mdc-theme-primary, #{textfield.$focused-label-color})
          );
        }

        .mdc-floating-label {
          @include theme.property(color, primary);
        }
      }
    }

    .mdc-text-field__input {
      color: var(--mdc-text-field-ink-color, #{textfield.$ink-color});
    }

    .mdc-text-field__input::placeholder {
      color: var(--mdc-text-field-label-ink-color, #{textfield.$label});
    }
  }

  .mdc-text-field-helper-line {
    .mdc-text-field-helper-text:not(.mdc-text-field-helper-text--validation-msg),
    &:not(.mdc-text-field--invalid) .mdc-text-field-character-counter {
      color: var(--mdc-text-field-label-ink-color, #{textfield.$label});
    }
  }
}

:host([disabled]) {
  .mdc-text-field {
    &:not(.mdc-text-field--outlined) {
      background-color: var(
        --mdc-text-field-disabled-fill-color,
        #{textfield.$disabled-background}
      );
    }

    &.mdc-text-field--outlined {
      mwc-notched-outline {
        --mdc-notched-outline-border-color: var(
          --mdc-text-field-outlined-disabled-border-color,
          #{textfield.$outlined-disabled-border}
        );
      }
    }

    &:not(.mdc-text-field--invalid):not(.mdc-text-field--focused) {
      .mdc-floating-label,
      .mdc-floating-label::after {
        color: var(
          --mdc-text-field-disabled-ink-color,
          #{textfield.$disabled-ink-color}
        );
      }
    }

    .mdc-text-field__input,
    .mdc-text-field__input::placeholder {
      color: var(
        --mdc-text-field-disabled-ink-color,
        #{textfield.$disabled-ink-color}
      );
    }
  }

  .mdc-text-field-helper-line {
    .mdc-text-field-helper-text,
    .mdc-text-field-character-counter {
      color: var(
        --mdc-text-field-disabled-ink-color,
        #{textfield.$disabled-ink-color}
      );
    }
  }
}