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

.THEME_NAME {
  .md-button-toggle,
  &.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 {
        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 {
        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 {
        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 {
        background-color: WARN-COLOR-600;
      }

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