@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");

$width: 195;
$height: 75;
$size: 15;

$icon-size: 80;
$icon-space: 16;

$color-1: #a5a7bb;
$color-2: #a496a4;
$color-3: #554d73;

body {
  font-family: Montserrat, sans-serif;
  font-size: 28px;
  background-color: lighten($color-2, 15%);
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.btn-challenge {
  color: $color-1;
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  background-color: $color-3;
  width: #{$width}px;
  height: #{$height}px;
  padding: 0;
  border: 0;
  margin: 0;
  outline: 0;
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 12px;
  position: relative;
  transition: background-color 180ms ease-out;
  & > small {
    color: $color-2;
    font-size: 0.6em;
    font-weight: normal;
  }
  &:hover {
    background-color: lighten($color-3, 8%);
  }
  &:active, &:hover:active {
    background-color: darken($color-3, 8%);
  }
}

.hover-area {
  width: #{$width}px;
  height: #{$height}px;
  display: grid;
  grid-template-columns: repeat($width / $size, #{$size}px);
  grid-template-rows: repeat($height / $size, #{$size}px);
  position: absolute;
  top: 0;
  left: 0;
  perspective: 500px;
  .hover-col {
    $x-count: $width / $size;
    $y-count: $height / $size;
    $x-half: floor($x-count / 2);
    $y-half: floor($y-count / 2);
    $x-angle: 90 / $x-half;
    $y-angle: 45 / $y-half;
    $nth: 1;
    z-index: 1;
    @for $y from $y-count - 1 to -1 {
      @for $x from 0 to $x-count {
        $x-cnt: $x - $x-half;
        $y-cnt: $y - $y-half;
        $x-deg: $x-cnt * $x-angle;
        $y-deg: $y-cnt * $y-angle;
        &:nth-child(#{$nth}):hover {
          & ~ .icon-home {
            transform:
              scale(1)
              rotateX(#{$y-deg}deg)
              rotateY(#{$x-deg}deg);
            transition: transform 380ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
          }
        }
        $nth: $nth + 1;
      }
    }
  }
  .icon-home {
    $roof-height: 20;
    $roof-width: 55;
    $roof-angle: 37.5;
    $roof-extra-size: 5;
    $wall-width: $icon-size;
    $wall-half: $wall-width / 2;
    $wall-height: 50;
    width: #{$icon-size}px;
    height: #{$icon-size}px;
    position: absolute;
    bottom: #{$height + $icon-space}px;
    left: calc(50% - #{$icon-size / 2}px);
    transform-origin: bottom center;
    transform-style: preserve-3d;
    transform: scale(0);
    transition: transform 225ms ease-out;
    .roof {
      height: #{$wall-width + ($roof-extra-size * 2)}px;
      position: absolute;
      left: 50%;
      transform-origin: bottom center;
      transform-style: preserve-3d;
      transform: translateZ(#{$wall-half + $roof-extra-size}px)
        rotateX(90deg);
      &.roof.roof-1 {
        top: -#{$wall-width + ($roof-extra-size * 2)}px;
      }
      &.roof.roof-2 {
        top: -#{$wall-width + ($roof-extra-size * 2) + $roof-height}px;
      }
      &:before,
      &:after {
        content: '';
        background-color: $color-3;
        width: 70px;
        height: 100%;
        position: absolute;
        top: 0;
        transform-style: preserve-3d;
      }
      &:before {
        right: 0;
        transform-origin: bottom right;
        transform: rotateY(#{-$roof-angle}deg);
        filter: brightness(105%);
      }
      &:after {
        left: 0;
        transform-origin: bottom left;
        transform: rotateY(#{$roof-angle}deg);
        filter: brightness(95%);
      }
    }
    .roof-design {
      height: #{$roof-height}px;
      position: absolute;
      top: -#{$roof-height}px;
      left: 50%;
      transform-style: preserve-3d;
      &.roof-design-1 {
        transform: translateZ(#{$wall-half + $roof-extra-size}px);
      }
      &.roof-design-2 {
        transform: translateZ(#{-$wall-half - $roof-extra-size}px);
      }
      &:before,
      &:after {
        content: '';
        background-color: $color-3;
        width: #{$roof-width}px;
        height: #{$roof-height}px;
        position: absolute;
        top: 0;
        transform-style: preserve-3d;
      }
      &:before {
        right: 0;
        transform-origin: bottom right;
        transform: skewY(#{-$roof-angle}deg);
      }
      &:after {
        left: 0;
        transform-origin: bottom left;
        transform: skewY(#{$roof-angle}deg);
      }
    }
    .roof-side {
      background-color: $color-3;
      width: #{$wall-width + ($roof-extra-size * 2)}px;
      height: #{$roof-height}px;
      position: absolute;
      top: 22px;
      transform-origin: top left;
      transform-style: preserve-3d;
      transform: translateZ(#{$wall-half + $roof-extra-size}px)
        rotateY(90deg);
      &.roof-side-1 {
        left: -15px;
        filter: brightness(105%);
      }
      &.roof-side-2 {
        right: -#{$wall-width + 25}px;
        filter: brightness(95%);
      }
    }
    .roof-wall {
      border-top: none;
      border-bottom: solid #{$icon-size - $wall-height + 1}px $color-1;
      border-left: solid #{$wall-width / 2}px transparent;
      border-right: solid #{$wall-width / 2}px transparent;
      position: absolute;
      top: 0;
      left: 0;
      transform-style: preserve-3d;
      &.roof-wall-1 {
        transform: translateZ(#{$wall-half}px);
      }
      &.roof-wall-2 {
        transform: translateZ(#{-$wall-half}px);
      }
    }
    .wall {
      background-color: $color-1;
      width: #{$wall-width + 1}px;
      height: #{$wall-height}px;
      position: absolute;
      bottom: 0;
      left: 0;
      transform-origin: center;
      transform-style: preserve-3d;
      &.wall-1 {
        transform: translateZ(#{$wall-half}px);
      }
      &.wall-2 {
        transform: translateZ(#{-$wall-half}px);
        filter: brightness(90%);
      }
      &.wall-3 {
        transform: rotateY(90deg) translateZ(#{-$wall-half}px);
        filter: brightness(105%);
      }
      &.wall-4 {
        transform: rotateY(90deg) translateZ(#{$wall-half}px);
        filter: brightness(95%);
      }
    }
    .door {
      $door-width: 30;
      $door-height: 40;
      background-color: $color-2;
      width: #{$door-width}px;
      height: #{$door-height}px;
      position: absolute;
      bottom: 0;
      left: calc(50% - #{$door-width / 2}px);
      transform-style: preserve-3d;
      transform: translateZ(#{$wall-half}px);
    }
    .floor {
      background-color: $color-1;
      width: #{$icon-size + 1}px;
      height: #{$icon-size + 1}px;
      position: absolute;
      bottom: 0;
      left: 0;
      transform-origin: center;
      transform-style: preserve-3d;
      transform: rotateX(90deg)
        translateZ(#{$icon-size / -2}px)
        scale(1.01);
      filter: brightness(90%);
    }
  }
}

// No Javascript