.md-field {
  &::after {
    background-color: var(--md-outline);
  }

  &::before {
    background-color: var(--md-primary);
  }

  .md-icon {
    color: var(--md-on-surface-medium);

    &::after {
      background-color: var(--md-ouline);
    }

    &.md-primary {
      color: var(--md-primary);
    }

    &.md-accent {
      color: var(--md-secondary);
    }
  }

  .md-helper-text,
  .md-count,
  .md-suffix,
  .md-prefix,
  label {
    color: var(--md-on-surface-medium);
  }

  .md-input,
  .md-textarea {
    color: var(--md-on-surface);

    &::-input-placeholder {
      color: var(--md-on-surface-medium);
    }
  }

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

    &::before {
      border-color: var(--md-primary);
    }
  }

  &.md-disabled {
    &::after {
      background-image: linear-gradient(
        to right,
        var(--md-on-surface-disabled) 0%,
        var(--md-on-surface-disabled) 33%,
        transparent 0%
      );
    }

    label,
    .md-input,
    .md-textarea {
      color: var(--md-on-surface-disabled);
    }
  }

  // &.md-focused,
  // &.md-highlight {
  //   .md-input,
  //   .md-textarea {
  //     color: var(--md-primary);
  //   }
  // }

  &.md-invalid {
    &::after {
      background-color: var(--md-error);
    }

    &.md-has-textarea:not(.md-autogrow) {
      &::before {
        border-color: var(--md-error);
      }
    }

    label,
    .md-error,
    .md-date-icon {
      color: var(--md-error);
    }
  }

  &.md-focused {
    label {
      color: var(--md-primary);
    }
  }
}