vuematerial/vue-material

.md-field {
  @include md-theme-component() {
    @if md-get-theme-mode() == light {
      &:after {
        background-color: rgba(#000, .42);
      }

      &:before {
        @include md-theme-property(background-color, primary);
      }

      .md-helper-text,
      .md-count,
      label {
        color: rgba(#000, .54);
      }

      .md-suffix, .md-prefix {
        color: rgba(#000, .54);
      }

      .md-input,
      .md-textarea {
        &::-webkit-input-placeholder {
          color: rgba(#000, .54);
        }
      }

      &.md-focused,
      &.md-has-value {
        .md-input,
        .md-textarea {
          -webkit-text-fill-color: rgba(#000, .87);
        }
      }

      &.md-has-textarea:not(.md-autogrow) {
        &:after {
          border-color: rgba(#000, .42);
        }

        &:before {
          @include md-theme-property(border-color, primary);
        }
      }

      &.md-disabled {
        &:after {
          background-image: linear-gradient(to right, rgba(#000, .38) 0%, rgba(#000, .38) 33%, transparent 0%);
        }

        label,
        .md-input,
        .md-textarea {
          color: rgba(#000, .42);
        }
      }
    } @else {
      &:after {
        background-color: rgba(#fff, .7);
      }

      &:before {
        @include md-theme-property(background-color, primary);
      }

      .md-helper-text,
      .md-count,
      label {
        color: rgba(#fff, .7);
      }

      .md-suffix, .md-prefix {
        color: rgba(#fff, .7);
      }

      .md-input,
      .md-textarea {
        &::-webkit-input-placeholder {
          color: rgba(#fff, .7);
        }
      }

      &.md-focused,
      &.md-has-value {
        .md-input,
        .md-textarea {
          -webkit-text-fill-color: #fff;
        }
      }

      &.md-has-textarea:not(.md-autogrow) {
        &:after {
          border-color: #fff;
        }

        &:before {
          @include md-theme-property(border-color, primary);
        }
      }

      &.md-disabled {
        &:after {
          background-image: linear-gradient(to right, rgba(#fff, .7) 0%, rgba(#fff, .7) 33%, transparent 0%);
        }

        label,
        .md-input,
        .md-textarea {
          color: rgba(#fff, .5);
        }
      }
    }

    > .md-icon {
      &:after {
        @include md-theme-property(background-color, background-variant);
      }
    }

    &.md-invalid {
      &:after {
        @include md-theme-property-by-hue(background-color, red, A400, field, error);
      }

      &.md-has-textarea:not(.md-autogrow) {
        &:before {
          @include md-theme-property-by-hue(border-color, red, A400, field, error);
        }
      }

      label {
        @include md-theme-property-by-hue(color, red, A400, field, error);
      }

      .md-error {
        @include md-theme-property-by-hue(color, red, A400, field, error);
      }

      .md-date-icon,
      .md-date-icon svg {
        @include md-theme-property-by-hue(color, red, A400, field, error);
        @include md-theme-property-by-hue(fill, red, A400, field, error);
      }
    }

    &.md-focused,
    &.md-highlight {
      .md-input,
      .md-textarea {
        @include md-theme-property(color, primary, background);
      }

      > .md-icon {
        @include md-theme-property(color, primary, background);
        @include md-theme-property(fill, primary, background);
      }
    }

    &.md-focused {
      label {
        @include md-theme-property(color, primary, background);
      }
    }

    &.md-disabled {
      .md-icon svg {
        @include md-theme-property(fill, disabled, background);
      }
    }
  }
}