vuematerial/vue-material

.md-chip {
  @include md-theme-component() {
    @include md-theme-property(background-color, highlight);
    @include md-theme-property(color, text-primary);

    .md-icon.md-icon-image svg {
      @if md-get-theme-mode() == light {
        @include md-theme-property(color, text-primary, text-primary);
        @include md-theme-property(fill, text-primary, text-primary);
      } @else {
        @include md-theme-property(color, text-primary);
        @include md-theme-property(fill, text-primary);
      }
    }

    &.md-deletable,
    &.md-clickable {
      &:not(.md-disabled):hover {
        @include md-theme-property(background-color, icon);
        @include md-theme-property(color, text-primary, icon);

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

        .md-input-action {
          @include md-theme-property(background-color, background, '', .87);
          @include md-theme-property(color, icon, background);

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

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

      .md-input-action {
        @include md-theme-property(color, icon, disabled);

        @if md-get-theme-mode() == light {
          @include md-theme-property(background-color, disabled);
        } @else {
          @include md-theme-property(background-color, disabled, disabled);
        }
      }

      &.md-deletable,
      &.md-clickable {
        &:not(.md-disabled):hover {
          @include md-theme-property(color, text-primary, icon);
          @include md-theme-property(background-color, icon);

          .md-input-action {
            @include md-theme-property(background-color, background, '', .87);
          }
        }
      }
    }

    &.md-accent,
    &.md-duplicated {
      @include md-theme-property(background-color, accent);
      @include md-theme-property(color, text-primary, accent);

      .md-input-action {
        @include md-theme-property(color, icon, disabled);

        @if md-get-theme-mode() == light {
          @include md-theme-property(background-color, disabled);
        } @else {
          @include md-theme-property(background-color, disabled, disabled);
        }
      }

      &.md-deletable,
      &.md-clickable {
        &:not(.md-disabled):hover {
          @include md-theme-property(background-color, icon);
          @include md-theme-property(color, text-primary, icon);

          .md-input-action {
            @include md-theme-property(background-color, background, '', .87);
          }
        }
      }
    }

    &.md-disabled {
      @include md-theme-property(background-color, highlight, '', .1);
      @include md-theme-property(color, text-accent);
    }
  }
}

.md-chips {
  @include md-theme-component() {
    @if md-get-theme-mode() == light {
      .md-clear  {
        background-color: rgba(#000, .2);
      }
    } @else {
      .md-clear  {
        background-color: rgba(#fff, .2);
      }
    }
  }
}