/**
 *  Slot Machine Generator
 *  Create an extremely biased, web-based slot machine game.
 *
 *  Copyright 2020-202s54, Marc S. Brooks (https://mbrooks.info)
 *  Licensed under the MIT license:
 *  http://www.opensource.org/licenses/mit-license.php
 */

.slot-machine {
  height: 480px;
  width: 600px;

  .display {
    display: flex;
    height: inherit;
    position: absolute;
    transform: translateZ(0);
    width: inherit;
    z-index: 2;

    .reel {
      background: transparent;
      border: 1px solid #999;
      border-radius: 10px;
      height: calc(100% - 103px);
      margin: 47px 10px;
      overflow: hidden;
      width: 200px;

      &:after {
        box-shadow: inset -3em -3em 4em #0C090A;
      }

      &:before {
        box-shadow: inset -3em 3em 4em #0C090A;
      }

      &:after,
      &:before {
        content: '';
        display: block;
        height: 50%;
        width: calc(100% + 100px);
      }
    }
  }

  .slots {
    height: inherit;
    z-index: 1;
    --webkit-transform: translate3d(0, 0, 0);

    .reel {
      display: inline-block;
      height: inherit;

      .strip {
        list-style: none;
        margin-left: -40px;
        transform-style: preserve-3d;

        &.start {
          animation: init 300ms ease-in reverse;
        }

        &.spin {
          animation: spin 600ms linear infinite reverse;
        }

        &.stop {
          animation: init 1000ms ease-out reverse
        }

        li {
          font-size: 0;
          position: absolute;
          text-align: center;
          -webkit-backface-visibility: hidden;
        }
      }
    }
  }

  @-moz-keyframes init {
    from {
      -moz-transform: rotateX(0);
    }
    to {
      -moz-transform: rotateX(15deg);
    }
  }

  @-webkit-keyframes init {
    from {
      -webkit-transform: rotateX(0);
    }
    to {
      -webkit-transform: rotateX(15deg);
    }
  }

  @-moz-keyframes spin {
    from {
      -moz-transform: rotateX(0);
    }
    to {
      -moz-transform: rotateX(360deg);
    }
  }

  @-webkit-keyframes spin {
    from {
      -webkit-transform: rotateX(0);
    }
    to {
      -webkit-transform: rotateX(360deg);
    }
  }
}