
// @require core/widget/widget.scss

/* FLIPPABLE */

.flippable {

  @extend %widget;
  @include children-no-gutter ();
  perspective: $flippable-perspective;
  transform-style: preserve-3d;
  transform-origin: 50%;

  /* FRONT / BACK */

  &-front,
  &-back {
    @include fill ();
    backface-visibility: hidden;

    // Transitioning `opacity` in order to support `disabled`
    // Transitioning `filter` in order to support `blurred`
    // Transitioning `box-shadow` in order to support `raisable`

    transition: transform $flippable-animation-duration,
                opacity $disabled-animation-duration,
                filter $blurred-animation-duration,
                box-shadow $raisable-animation-duration;
  }

  /* FRONT */

  &-front {
    z-index: 1;
  }

  /* BACK */

  &-back {
    position: absolute;
    top: 0;
  }

}

/* DISAPPEARING FIX (IE-10/11) */

// Their implementation of `backface-visibility: hidden` is buggy, but `.flippable-front` and `.flippable-back` for some reasons don't disappear if we put `.flippable-front` in its own layer
// The resulting animation isn't perfect though

html.flexbox-tweener {

  .flippable {
    transform: translateZ(0);
  }

}
