@import "button";

$grid-max-size: 10;

@mixin game-field {
    .game-container {
      margin-top: var(--game-container-margin-top);
      position: relative;
      padding: var(--grid-gap);
  
      cursor: default;
      -webkit-touch-callout: none;
      -ms-touch-callout: none;
  
      user-select: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
  
      -ms-touch-action: none;
      touch-action: none;
  
      background: var(--game-container-background);
      transition: all 0.25s;
      border-radius: calc(var(--tile-border-radius) * 2);
      width: var(--field-width);
      height: var(--field-width);
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  
      .game-message {
        display: none;
  
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(var(--tile-color), .8);
        z-index: 100;
  
        text-align: center;
  
        p {
          line-height: 60px;
          font-weight: bold;
        }
  
        .tilanne {
          font-size: 60px;
          margin-top: 180px;
          // height: $field-width;
          // line-height: $field-width;
        }
  
        .kurinpalautukset {
          font-size: 20px;
        }
  
        .lower {
          display: block;
          margin-top: 59px;
        }
  
        a {
          @include button;
          margin-left: 9px;
          // margin-top: 59px;
  
          &.keep-playing-button {
            display: none;
          }
        }
  
        @include animation(fade-in 800ms ease calc(var(--transition-speed) * 12));
        @include animation-fill-mode(both);
  
        &.game-won {
          background: rgba(var(--tile-gold-color), .5);
          color: var(--bright-text-color);
  
          a.keep-playing-button {
            display: inline-block;
          }
        }
  
        &.game-won, &.game-over {
          display: block;
        }
      }
    }
  
    .grid-container {
      position: absolute;
      z-index: 1;
      overflow: hidden;
      display: grid;
      grid-template-rows: repeat(var(--grid-size-max), var(--tile-size));
      grid-template-columns: repeat(var(--grid-size-max), var(--tile-size));
      gap: var(--grid-gap);
      height: calc(100% - calc(var(--grid-gap) * 2));
      width: calc(100% - calc(var(--grid-gap) * 2));
      transition: all 0.25s;
    }
  
    .grid-row {
      display: grid;
      grid-template-columns: repeat(var(--grid-size), var(--tile-size));
      gap: var(--grid-gap);
      overflow: hidden;
  
      &:last-child {
        margin-bottom: 0;
      }
  
      &:after {
        content: "";
        display: block;
        clear: both;
      }
    }
  
    .grid-cell {
      width: var(--tile-size);
      height: var(--tile-size);
      margin-right: var(--grid-gap);
      transition: all .25s;
  
      border-radius: var(--tile-border-radius);
  
      background: rgba(var(--tile-color), .35);
  
      &:last-child {
        margin-right: 0;
      }
    }
  
    .tile-container {
      position: absolute;
      z-index: 2;
    }
  
    .tile {
      &, .tile-inner {
        width: var(--tile-size);
        height: var(--tile-size);
        line-height: var(--tile-size);

        background-size: cover;
        background-image: var(--img-path);

        transition: all 0.25s;
      }
  
      // Build position classes
      @for $x from 1 through $grid-max-size {
        @for $y from 1 through $grid-max-size {
          &.tile-position-#{$x}-#{$y} {
            --x: #{$x};
            --y: #{$y};
            --xpos: calc( calc(var(--tile-size) + var(--grid-gap)) * calc(var(--x) - 1) );
            --ypos: calc( calc(var(--tile-size) + var(--grid-gap)) * calc(var(--y) - 1) );
            @include transform(translate(var(--xpos), var(--ypos)));
          }
        }
      }
    }
  }