$transition: opacity 300ms linear;

.svg-trigger {
  .svg-builder-group-hover {
    g[id^='svg-group-hover-'] {
      opacity: 0;
    }

    g[id*='-on-start'] {
      opacity: 1;
    }

    g {
      transition: $transition; /* vendorless fallback */
      -o-transition: $transition; /* opera */
      -ms-transition: $transition; /* IE 10 */
      -moz-transition: $transition; /* Firefox */
      -webkit-transition: $transition; /*safari and chrome */
    }
  }

  &:hover {
    .svg-builder-group-hover {
      g[id^='svg-group-hover-'] {
        opacity: 0;
      }

      g[id*='-on-hover'] {
        opacity: 1;
      }
    }
  }
}
