vue-material/src/components/mdButtonToggle/mdButtonToggle.theme

.THEME_NAME {
  &.md-button-toggle {
    .md-button {
      &:after {
        width: 1px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        content: " ";
      }
    }

    .md-toggle {
      color: #{'BACKGROUND-CONTRAST-600'};
      background-color: #{'BACKGROUND-COLOR-500'};

      &:hover:not([disabled]) {
        background-color: #{'BACKGROUND-COLOR-600'};
      }

      + .md-toggle:after {
        background-color: #{'BACKGROUND-COLOR-600'};
      }
    }

    &.md-primary .md-toggle {
      color: #{'PRIMARY-CONTRAST'};
      background-color: #{'PRIMARY-COLOR'};

      &:hover:not([disabled]) {
        background-color: #{'PRIMARY-COLOR-600'};
      }

      + .md-toggle:after {
        background-color: #{'PRIMARY-COLOR-700'};
      }
    }

    &.md-accent .md-toggle {
      color: #{'ACCENT-CONTRAST'};
      background-color: #{'ACCENT-COLOR'};

      &:hover:not([disabled]) {
        background-color: #{'ACCENT-COLOR-600'};
      }

      + .md-toggle:after {
        background-color: #{'ACCENT-COLOR-700'};
      }
    }

    &.md-warn .md-toggle {
      color: #{'WARN-CONTRAST'};
      background-color: #{'WARN-COLOR'};

      &:hover:not([disabled]) {
        background-color: #{'WARN-COLOR-600'};
      }

      + .md-toggle:after {
        background-color: #{'WARN-COLOR-700'};
      }
    }

    [disabled] {
      color: rgba(#000, .26);

      &.md-toggle {
        color: #{'BACKGROUND-CONTRAST-0.2'};
        background-color: rgba(#000, .26);
      }
    }
  }
}