vuematerial/vue-material

.md-checkbox {
  @include md-theme-component() {
    &.md-checked {
      .md-checkbox-container {
        @include md-theme-property(background-color, accent);
        @include md-theme-property(border-color, accent);

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

      .md-ripple {
        @include md-theme-property(color, accent);
      }
    }

    &.md-indeterminate {
      .md-checkbox-container {
        border-color: rgba(#000, .54);
        background-color: rgba(#fff, .3);
        &:after {
          border-color: rgba(#000, .54);
        }
      }
      .md-ripple {
        color: rgba(#000, .54);
      }
    }

    &.md-checked.md-primary {
      .md-checkbox-container {
        @include md-theme-property(background-color, primary);
        @include md-theme-property(border-color, primary);
      }

      .md-ripple {
        @include md-theme-property(color, primary);
      }
    }

    @if md-get-theme-mode() == light {
      &.md-indeterminate {
        .md-checkbox-container {
          border-color: rgba(#000, .54);
          background-color: transparent;
          &:after {
            border-color: rgba(#000, .54);
          }
        }
        .md-ripple {
          color: rgba(#000, .54);
        }
      }
      .md-checkbox-container {
        border-color: rgba(#000, .54);
      }

      &.md-disabled {
        .md-checkbox-container {
          border-color: rgba(#000, .26);
        }

        &.md-checked {
          .md-checkbox-container {
            border-color: rgba(#000, .26);
            background-color: rgba(#000, .26);
          }
        }
      }
    } @else {
      &.md-indeterminate {
        .md-checkbox-container {
          border-color: rgba(#fff, .7);
          background-color: transparent;
          &:after {
            border-color: rgba(#fff, .7);
          }
        }
        .md-ripple {
          color: rgba(#fff, .7);
        }
      }

      .md-checkbox-container {
        border-color: rgba(#fff, .7);
      }

      &.md-disabled {
        .md-checkbox-container {
          border-color: rgba(#fff, .3);
        }

        &.md-checked {
          .md-checkbox-container {
            border-color: rgba(#fff, .3);
            background-color: rgba(#fff, .3);
          }
        }
      }
    }
  }
}