vuematerial/vue-material

@mixin md-bottom-bar-spec ($primary) {
  &.md-type-fixed {
    @include md-theme-property(background-color, background);

    .md-bottom-bar-item.md-active {
      @include md-theme-property(color, $primary, background);

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

        svg {
          @include md-theme-property(fill, $primary, background);
        }
      }
    }
  }

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

    > .md-ripple {
      .md-ripple-wave {
        @include md-theme-property-darken(background-color, $primary, $primary, 10%);
      }
    }

    .md-icon {
      @include md-theme-property(color, icon, $primary);

      svg {
        @include md-theme-property(fill, icon, $primary);
      }
    }

    .md-bottom-bar-item {
      @include md-theme-property(color, text-primary, $primary);

      .md-active {
        .md-icon {
          @include md-theme-property(color, text-primary, $primary);

          svg {
            @include md-theme-property(fill, text-primary, $primary);
          }
        }
      }
    }
  }
}

.md-bottom-bar {
  @include md-theme-component() {
    @include md-bottom-bar-spec(primary);

    &.md-accent {
      @include md-bottom-bar-spec(accent);
    }
  }
}