$blend-modes:
('my': multiply,
'ov': overlay,
'sn': screen);

.m-ef-bm {
  @each $suffix, $mode in $blend-modes {
    &-#{$suffix} {
      mix-blend-mode: $mode;
    }
  }
}

// .m-ef-hv--1 {
//   &:hover {
//     transform: translateY(10%);
//     box-shadow: 0 1rem 2rem transparentize(color('black'), 0.7);
//   }

//   &:active,
//   &focus {
//     transform: translateY(5%);
//     box-shadow: 0 0.5rem 1rem transparentize(color('black'), 0.7);
//   }
// }

@each $theme in $themes {
  $color: $theme;
  $color-light: $theme + '-light';
  $color-dark: $theme + '-dark';
  $font-color: 'font-' + $theme;
  $font-color-light: 'font-' + $theme + '-light';
  $font-color-dark: 'font-' + $theme + '-dark';

  .m-ef-hv-tx-#{$color}:hover {
    color: color($color);
  }

  .m-ef-hv-bg-1 {

    &.m-#{$theme} {

      &:hover {
        background-color: color($color-dark);
        color: color($font-color-dark);
      }
  
      &::after {
        background-color: color($color);
      }
    }
  }
}

.m-ef-hv-fp{

  &-x {
    transform-style: preserve-3d;
    perspective: 150rem;

    .side-back {
      @include respond-to('large') {
        //Rotate to hide back
        transform: rotateX(180deg);
      }
    }
    
    &:hover .side-front {
      @include respond-to('large') {
        // Rotate to show back
        transform: rotateX(-180deg);
      }
    }
    
    &:hover .side-back {
      @include respond-to('large') {
        transform: rotateX(0);
      }
    }
  }
  
  &-y {

    transform-style: preserve-3d;
    perspective: 150rem;

    .side-back {
      @include respond-to('large') {
        //Rotate to hide back
        transform: rotateY(180deg);
      }
    }
    
    &:hover .side-front {
      @include respond-to('large') {
        // Rotate to show back
        transform: rotateY(-180deg);
      }
    }
    
    &:hover .side-back {
      @include respond-to('large') {
        transform: rotateY(0);
      }
    }

  }
}


.m-ef-hv-cb2D{

  &-x {
    .side-front {
      
      @include respond-to('large') {
        transform-origin: top;
        transform: translateY(0) rotateX(0deg);
      }
    }

    &:hover .side-front {
      @include respond-to('large') {
        // Rotate to show back
        transform: translateY(100%) rotateX(90deg);
      }
    }



    .side-back {

      @include respond-to('large') {
        transform-origin: bottom;
        //Rotate to hide back
        transform: translateY(-100%) rotateX(90deg) ;
      }
    }
    
    
    &:hover .side-back {
      @include respond-to('large') {
        transform: translateY(0) rotateX(0deg);
      }
    }
  }

}

.m-ef-hv-si {

  &-r {

    overflow: hidden;

    .side-back {

      @include respond-to('large') {
        transform: translateX(100%);
      }
    }
    
    
    &:hover .side-back {
      @include respond-to('large') {
        transform: translateX(0%);
      }
    }
  }

  &-b {

    overflow: hidden;

    .side-back {

      @include respond-to('large') {
        transform: translateY(100%);
      }
    }
    
    
    &:hover .side-back {
      @include respond-to('large') {
        transform: translateY(0%);
      }
    }
  }

}