@import "vars";
@import "mixins";

#account-forms {
  z-index: 2000;
  width: 100%;
  height: 100%;
  
  &.got-user {display: none; }

  > div {
    display: table;
    width: 100%;
    height: 100%;
    // color: white;
    position: absolute !important;
    pointer-events: none;
    
    &.active   { 
      &#login form { @include rotateY(0deg); } 
      &#signup form { @include rotateY(0deg); }
      &#password-reset form { @include rotateY(0deg); }
      &#password-confirm form { @include rotateY(0deg); }
      form {
        opacity: 1;
        pointer-events: auto;
      }
    }

    .content {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      -webkit-perspective: 1000;
         -moz-perspective: 1000;
          -ms-perspective: 1000;
              perspective: 1000;
      @include perspective-origin(center center);
    }

    &#login form { @include rotateY(-180deg); } 
    &#signup form { @include rotateY(180deg); }
    &#password form { @include rotateY(180deg); }

    form {
      h4 {
        display: inline-block;
      }
      text-align: left;
      display: inline-block;
      width: 330px;
      opacity: 0;

      @include backface-visibility(hidden);

      @include transition( all 0.25s ease-in-out);
      @include transform-origin(center center);
    }
  }
}