@import "bourbon";

/**\
|**| Constants
\**/
$debug: true;                          // <insert description>

$card-width: 7em;                      // <insert description>
$card-height: ($card-width * 1.4);     // <insert description>
$max-hand-size: 10;                    // <insert description>
$fanning-angle: -3deg;                 // <insert description>
$hand-gutter: 60px;                    // <insert description>

$bottom-shadow-color: black;           // <insert description>
$top-shadow-color: black;              // <insert description>

/**\
|**| Mixins
\**/
// Material Shadow mixin
// @credit: CSS-Tricks
// @link:   https://css-tricks.com/snippets/sass/material-shadows-mixin/

/**
 * Computes a top-shadow for a card effect.
 *
 * @param {Number} $depth - depth level
 *
 * @return {List}
 */
@function top-shadow($depth) {
  $primary-offset: nth(1.5 3 10 14 19, $depth) * 1px;
  $blur: nth(1.5 3 10 14 19, $depth) * 4px;
  $color: rgba($top-shadow-color, nth(.12 .16 .19 .25 .30, $depth));

  @return 0 $primary-offset $blur $color;
}

/**
 * Computes a bottom-shadow for a card effect.
 *
 * @param {Number} $depth - depth level
 *
 * @return {List}
 */
@function bottom-shadow($depth) {
  $primary-offset: nth(1.5 3 6 10 15, $depth) * 1px;
  $blur: nth(1 3 3 5 6, $depth) * 4px;
  $color: rgba($bottom-shadow-color, nth(.24 .23 .23 .22 .22, $depth));

  @return 0 $primary-offset $blur $color;
}

/**
 * Gives a card depth effect.
 *
 * @param {Number} $depth - depth level (between 1 and 5)
 *
 * @link https://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality Google Design
 *
 * @requires {function} top-shadow
 * @requires {function} bottom-shadow
 */
@mixin shadow($depth) {
  @if $depth < 1 {
    box-shadow: none;
  } @else if $depth > 5 {
    @warn "Invalid $depth `#{$depth}` for mixin `card`.";
  } @else {
    box-shadow: bottom-shadow($depth), top-shadow($depth);  
  }
}

/**\
|  | Styles
\**/
.hand-wrapper {
  @if ($debug) {
    border: 1px solid red;
  }
  width: 100%;
  position: absolute;
  bottom: 5px;
  .hand {
    @if ($debug) {
      border: 1px solid blue;
    }
    display: inline-block;
    .card {
      position: relative;
      float: left;
      //display: block;
      background-color: #fff;
      top: 0px;
      width: $card-width;
      height: $card-height;
      @include shadow(1);
      @include transform-style(preserve-3d);
      @include transition(top 0.1s, box-shadow 0.2s); 
      &:hover {
        @include shadow(2);
        top: -20px;
      }
      &.flipped { // Doesnt work because of transforms
        @include transform(rotateY(180deg));
      }
      .front, .back {
        @include backface-visibility(hidden);
        position: absolute;
        width: 100%;
        height: 100%;
      }
      .front {
        @if ($debug) {
          border: solid 1px green;
        }
        @include transform(rotateY(0deg));
      }
      .back {
        @if ($debug) {
          border: solid 1px orange;
        }
        @include transform(rotateY(180deg));
      }
      @for $i from 1 through $max-hand-size {
        // i cards in hand
        &:first-child:nth-last-child(#{$i}),
        &:first-child:nth-last-child(#{$i}) ~ .card {
          // hand fanning
          $current-angle: floor($i/2)*$fanning-angle;
          $current-gutter: floor($i/2)*$hand-gutter;
          @for $j from 1 through $i {
            &:nth-child(#{$j}) {
              @include transform(rotate(#{$current-angle}));
              left: $current-gutter;
            }
            $current-angle: $current-angle + -$fanning-angle;
            $current-gutter: $current-gutter + -$hand-gutter;
          }
        }
      }
    }
  }
}

// BUG: Dragging sometimes causes scroll bars to appear on the page.
//Happens when dragged element goes offscreen
body {
  overflow: hidden;
  margin: 0;
  height: 100vh;
  width: 100vw;
  text-align: center;
}

* {
  box-sizing: border-box;
}