ehmorris/cardslap

.cards-quiz {
  height: 400px;

  ul {
    display: none;

    &:first-child {
      display: block;
    }
  }

  li {
    @include box-sizing(content-box);
    display: block;
    height: 300px;
    -moz-perspective: 600px;
    overflow: hidden;
    padding: 2em 0;
    @include position(absolute, 0 0px 0 0px);
    @include transition;
    -webkit-perspective: 600px;

    .front, .back {
      background: #eee;
      @include box-shadow(0 10px 20px rgba(0,0,0,.2));
      @include box-sizing(border-box);
      display: block;
      height: 300px;
      left: 50%;
      margin: auto;
      margin-left: -310px;
      -moz-backface-visibility: hidden;
      -moz-transform-style: preserve-3d;
      -moz-transition: all .25s ease-in-out;
      overflow: auto;
      padding: 2em;
      position: absolute;
      -webkit-backface-visibility: hidden;
      -webkit-transform-style: preserve-3d;
      -webkit-transition: all .25s ease-in-out;
      width: 300px;

      pre.text {
        font: inherit;
        line-height: inherit;
        margin: 0;
      }

      &.image {
        padding: 0;

        img {
          width: 100%;
        }
      }

      .actions {
        display: none;
      }
    }

    .front {
      @include transform(rotate3d(45,45,0,0deg));
      z-index: 1;
    }

    .back {
      background: lighten($gray, 40%);
      color: #000;
      @include transform(rotate3d(45,45,0,-180deg));
      z-index: 0;
    }

    &.flip .front {
      @include transform(rotate3d(45,45,0,180deg));
    }

    &.flip .back {
      z-index: 2;
      @include transform(rotate3d(45,45,0,0deg));
    }

    form {
      margin-left: 10px;
      @include position(absolute, 0 0 0 50%);

      textarea {
        height: 263px;
        margin: 0 0 .5em 0;
        width: 300px;
      }
    }

    form.form-back {
      display: none;

      .guess {
        font-weight: bold;
      }
    }

    &.flip {
      form.form-front {
        display: none;
      }

      form.form-back {
        display: block;
      }
    }
  }

  @include media($smallandtouch) {
    height: auto;

    li {
      background: none;
      height: auto;
      padding: 0;
      position: static;

      .front, .back {
        @include box-shadow(none);
        height: 200px;
        margin: 0;
        padding: 1em;
        position: static;
        width: 100%;
      }

      .back {
        height: 0;
        padding: 0;
      }

      &.flip {
        .front {
          height: 0;
          padding: 0;
        }

        .back {
          height: 200px;
          padding: 1em;
        }
      }

      form {
        margin: 1em 0 0 0;
        position: static;
        width: 100%;

        textarea {
          height: 4em;
          width: 100%;
        }
      }
    }
  }
}

#bin.quiz {
  li {
    .front, .back {
      .actions {
        display: none;
      }
    }

    form {
      display: none;
    }
  }
}