/* Effect 7 */
@mixin hi-icon-effect-7($color, $background-color) {
  .hi-icon {
    box-shadow: 0 0 0 2px rgba($background-color, 1);
    -webkit-transition: background 0.2s, color 0.2s;
    -moz-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;

    :hover {
      color: $color;
    }

    &:after {
      top: -4px;
      left: -4px;
      padding: 4px;
      z-index: -1;
      opacity: 0;
    }
  }
}

.hi-icon-effect-7 {
  @include hi-icon-effect-7(#ffffff, #ffffff);
}

/* Effect 7a */
@mixin hi-icon-effect-7a($background-color) {
  .hi-icon {
    &:after {
      box-shadow: 0 0 0 rgba($background-color, 1);
      @include transition(opacity 0.2s, box-shadow 0.2s);
    }

    &:before {
      opacity: 0.7;
      @include transform(scale(0.8));
      @include transition(transform 0.2s, opacity 0.2s);
    }

    &:hover {
      &:before {
        opacity: 1;
        @include transform(scale(1));
      }

      &:after {
        opacity: 1;
        box-shadow: 2px 2px 0 rgba($background-color, 1);
      }
    }
  }
}

.hi-icon-effect-7a {
  @include hi-icon-effect-7a(#ffffff);
}

/* Effect 7b */
@mixin hi-icon-effect-7b($background-color) {
  .hi-icon {
    &:before {
      opacity: 0.7;
      @include transform(scale(0.8));
      @include transition(transform 0.2s, opacity 0.2s);
    }

    &:after {
      box-shadow: 2px 2px rgba($background-color, 1);
      @include transform(rotate(-90deg));
      @include transition(opacity 0.2s, transform 0.2s);
    }

    &:hover {
      &:before {
        opacity: 1;
        @include transform(scale(1));
      }

      &:after {
        opacity: 1;
        @include transform(rotate(0deg));
      }
    }
  }
}

.hi-icon-effect-7b {
  @include hi-icon-effect-7b(#ffffff);
}