//Mixins
//-------------------------------

@mixin box-model($model: border-box) {
	-moz-box-sizing	  : $model;
	-webkit-box-sizing : $model;
	box-sizing				: $model;
}

@mixin border-radius($radius: 5px) {
	-moz-border-radius	 : $radius;
	-webkit-border-radius: $radius;
	border-radius: $radius;
}

@mixin transform($transforms) {
	   -moz-transform: $transforms;
	     -o-transform: $transforms;
	    -ms-transform: $transforms;
	-webkit-transform: $transforms;
          transform: $transforms;
}

@mixin rotate ($deg) {
  @include transform(rotate(#{$deg}deg));
}

@mixin box-shadow($hs: 1px, $vs: 1px, $blur: 5px, $spread: 1px, $color: grey, $inset: false) {
	@if not $inset{
		-webkit-box-shadow: $hs $vs $blur $spread $color;
		-moz-box-shadow: $hs $vs $blur $spread $color;
		box-shadow: $hs $vs $blur $spread $color;
	}
	@else{
		-webkit-box-shadow: $hs $vs $blur $spread $color inset;
		-moz-box-shadow: $hs $vs $blur $spread $color inset;
		box-shadow: $hs $vs $blur $spread $color inset;
	}
}

//Variables
//-------------------------------

$body-bg: #586f81;
$gb-bg: #e0e2e3;
$gb-inner: #495b66;
$gb-screen: #55af7e;
$gb-grill: #b6bbbf;
$gb-start: #5a6b7a;
$gb-buttons: #bc4374;
$gb-dpad: #393e43;


//Pen Info
//-------------------------------

body {
  background-color: $body-bg;
  * {
    @include box-model();
    &:after,&:before {
      content: " ";
      display: block;
    }
  }
  label {
    background-color: rgba(255,255,255,1);
    color: #000;
    padding: 10px 15px;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 10px;
    box-shadow: 4px 3px 0px rgba(0,0,0,0.15);
    cursor: pointer;
    &:hover {
      background-color: rgba(255,255,255,0.75);
      ~h1{
        display: block;
      }
    }
  }
  input {
    display: none;
    &:checked {
      ~h1 {
        display: block;
      }
      ~label {
        background-color: rgba(255,255,255,0.75);
      }
    }
  }
  h1 {
    display: none;
    font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
    font-size: 18px;
    color: #000;
    background-color: #fff;
    padding: 10px;
    position: absolute;
    left: 55px;
    top: 10px;
    box-shadow: 4px 3px 0px rgba(0,0,0,0.15);
    z-index: 999;
    &:hover {
      display: block;
    }
    a, a:visited, a:hover {
      color: #000;
    }
  }
}

//Magic

.gameboy {
  width: 100px;
  height: 165px;
  background-color: $gb-bg;
  @include border-radius(5px);
  border-bottom-right-radius: 20px;
  margin: 5% auto;
  padding: 10px;
  position: relative;
  @include box-shadow(0px,0px,40px,1px,rgba(0,0,0,0.5));
  &:after {
    width: 17.5%;
    height: 12.5%;
    right: 12.5%;
    bottom: 6%;
    position: absolute;
    @include rotate(45);
    background-color: $gb-grill;
        background: linear-gradient($gb-grill 50%, transparent 50%);
    background-size: 20%;
  }
  .display {
    width: 100%;
    height: 50%;
    @include border-radius(5px);
    border-bottom-right-radius: 20px;
    background-color: $gb-inner;
    padding: 10px 12.5px;
    display: block;
    position: relative;
    .light {
      background-color: $gb-dpad;
      @include border-radius(50%);
      width: 4%;
      height: 4%;
      position: absolute;
      left: 6%;
      top: 30%;
      &.on {
        background-color: $gb-buttons;
      }
    }
    .screen {
      width: 100%;
      height: 100%;
      background-color: $gb-screen;
      &.flash {
        background-color: darken($gb-screen, 30%);
      }
      svg {
        width: 100%;
        height: 15%;
        fill: darken($gb-screen, 30%);
        margin: 40% 4%;
        display: none;
      }
    }
  }
  .dpad {
    width: 35%;
    height: 3.5%;
    margin: 25% 0 7% 12%;
    display: inline-block;
    position: relative;
    vertical-align: top;
    li {
      background-color: $gb-dpad;
      @include border-radius(3px);
      cursor: pointer;
      width: 40%;
      height: 235%;
      display: inline-block;
      margin: 0 -5%;
      &:first-child,&:last-child {
        display: block;
        margin: -7.5% 0;
      }
      &:first-child {
       margin-bottom: -17.5%;
        
      }
      &:last-child {
        margin-top: -18%;
      }
      &:nth-child(2){
        margin: 0 30% 0 -30%;
      }
      &:nth-child(3){
        
      }
      &.button-press,&:hover {
        background-color: lighten($gb-dpad, 10%);
      }
    }
    &:after {
      width: 37.5%;
      height: 225%;
      position: absolute;
      background-color: $gb-dpad;
      top: 140%;
      left: 3%;
      z-index: 99;
    }
  }
  .startselect {
    width: 35%;
    display: inline-block;
    height: 5%;
    margin: 60% -12.5% 0 -17.5%;
    vertical-align: top;
    li {
      background-color: $gb-start;
      width: 50%;
      height: 50%;
      display: inline-block;
      @include rotate(145);
      cursor: pointer;
      &.button-press,&:hover {
        background-color: lighten($gb-start, 10%);
      }
    }
  }
  .buttons {
    width: 45%;
    height: 12.5%;
    margin: 27.5% -2.5% 0 5%;
    display: inline-block;
    background-color: $gb-grill;
    @include rotate(135);
    @include border-radius(10px);
    li {
      width: 30%;
      height: 60%;
      margin: 10%;
      @include box-model(content-box);
      background-color: $gb-buttons;
      @include border-radius(50%);
      display: inline-block;
      cursor: pointer;
      &.button-press,&:hover {
        background-color: lighten($gb-buttons, 10%);
      }
    }
  }
  .tooltip{
    font-family: Arial, 'sans-serrif';
    position: absolute;
    top: -17.5%;
    left: -40%;
    background-color: $gb-bg;
    font-size: 11px;
    @include border-radius(3px);
    height: 20px;
    padding: 5px;
    &:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-width: 5px;
      border-style: solid;
      border-color: $gb-bg transparent transparent transparent;
      top: 20px;
      left: 25%;
    }
  }
}