@use '@material/textfield/mixins' as textfield-mixins;
@use '@material/textfield/icon/mixins' as textfield-icon-mixins;
@use '@material/textfield/helper-text/mixins' as textfield-helper-text-mixins;

// stylelint-disable selector-class-pattern
.demo-text-field-custom-colors:not(.mdc-text-field--invalid) {
  $idle-border: rgba(blue, 0.38);
  $hover-border: rgba(blue, 0.6);
  $focused-border: rgba(blue, 1);

  @include textfield-mixins.bottom-line-color($idle-border);
  @include textfield-mixins.hover-bottom-line-color($hover-border);
  @include textfield-mixins.line-ripple-color($focused-border);
  @include textfield-mixins.ink-color(black);
  @include textfield-mixins.label-color(rgba(blue, 0.5));
  @include textfield-mixins.outline-color($idle-border);
  @include textfield-mixins.hover-outline-color($hover-border);
  @include textfield-mixins.focused-outline-color($focused-border);
  @include textfield-helper-text-mixins.helper-text-color($idle-border);
  // @include textfield-mixins.textarea-stroke-color($idle-border);
  // @include textfield-icon-mixins.icon-color($hover-border);
  @include textfield-mixins.caret-color($focused-border);

  &.mdc-text-field--focused {
    @include textfield-mixins.label-color(rgba(blue, 0.87));
    // @include textfield-icon-mixins.icon-color($focused-border);
  }
}

.demo-textarea:not(.mdc-text-field--invalid) {
  $idle-border: rgba(blue, 0.38);
  $hover-border: rgba(blue, 0.6);
  $focused-border: rgba(blue, 1);

  @include textfield-mixins.ink-color(black);
  @include textfield-mixins.label-color(rgba(blue, 0.5));
  // @include textfield-mixins.textarea-stroke-color($idle-border);
  @include textfield-mixins.caret-color($focused-border);

  &.mdc-text-field--focused {
    @include textfield-mixins.label-color(rgba(blue, 0.87));
    // @include textfield-mixins.textarea-stroke-color($focused-border);
  }
}

.demo-textarea.mdc-text-field--invalid {
  @include textfield-mixins.ink-color(orange);
  @include textfield-mixins.label-color(rgba(orange, 0.5));
  // @include textfield-mixins.textarea-stroke-color(rgba(orange, 0.38));
  @include textfield-mixins.caret-color(orange);

  &.mdc-text-field--focused {
    @include textfield-mixins.label-color(rgba(orange, 0.87));
    // @include textfield-mixins.textarea-stroke-color(orange);
  }
}

.demo-fullwidth-input:not(.mdc-text-field--invalid) {
  // @include textfield-mixins.fullwidth-bottom-line-color(rgba(blue, 0.38));
  @include textfield-mixins.ink-color(black);
  @include textfield-mixins.label-color(rgba(blue, 0.5));
  @include textfield-mixins.line-ripple-color(blue);
  @include textfield-mixins.caret-color(blue);

  &.mdc-text-field--focused {
    @include textfield-mixins.label-color(rgba(blue, 0.87));
  }
}

.demo-fullwidth-input.mdc-text-field--invalid {
  // @include textfield-mixins.fullwidth-bottom-line-color(rgba(orange, 0.38));
  @include textfield-mixins.ink-color(orange);
  @include textfield-mixins.label-color(rgba(orange, 0.5));
  @include textfield-mixins.line-ripple-color(orange);
  @include textfield-mixins.caret-color(orange);

  &.mdc-text-field--focused {
    @include textfield-mixins.label-color(rgba(orange, 0.87));
    // @include textfield-mixins.fullwidth-bottom-line-color(orange);
  }
}

.demo-text-field-custom-error-colors.mdc-text-field--invalid {
  $idle-border: rgba(orange, 0.38);
  $hover-border: rgba(orange, 0.6);
  $focused-border: rgba(orange, 1);

  @include textfield-mixins.bottom-line-color($idle-border);
  @include textfield-mixins.hover-bottom-line-color($hover-border);
  @include textfield-mixins.line-ripple-color($focused-border);
  @include textfield-mixins.ink-color(orange);
  @include textfield-mixins.label-color(rgba(orange, 0.87));
  @include textfield-mixins.outline-color($idle-border);
  @include textfield-mixins.hover-outline-color($hover-border);
  @include textfield-mixins.focused-outline-color($focused-border);
  @include textfield-helper-text-mixins.helper-text-validation-color(
    $hover-border
  );
  // @include textfield-mixins.textarea-stroke-color($idle-border);
  @include textfield-mixins.caret-color($focused-border);
  // @include textfield-mixins.icon-color($focused-border);

  // Example for --invalid textfield when helper text is not a validation message.
  @include textfield-helper-text-mixins.helper-text-color(rgba(blue, 0.6));
}
// stylelint-enable selector-class-pattern

.demo-text-field-wrapper {
  margin-bottom: 8px;
}

.demo-tf-add-space {
  margin: 10px 0;
}
