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

@mixin box-model($model: border-box) {
	-moz-box-sizing	  : $model;
	-webkit-box-sizing : $model;
	box-sizing				: $model;
}
@mixin antialiasing( $type:antialiased ) {
	-webkit-font-smoothing: $type;
	font-smoothing: $type;
	font-smooth: always;
}
@mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name { @content; }
  @-moz-keyframes $animation-name { @content; }
  @keyframes $animation-name { @content; }
}
@mixin animation($animation...) {
  -o-animation: $animation;
  -moz-animation: $animation;
  -webkit-animation: $animation;
  animation: $animation;
}


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

$orange: #FF6C49;
$red: #FF433C;
$cream: #FF9165;
$white: #FFF;

// Animations
//-------------------------------

@-webkit-keyframes screenon {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@-moz-keyframes screenon {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes screenon {
  from { opacity: 0; }
  to   { opacity: 1; }
}

*,
*:after,
*:before {
  @include box-model;
  @include antialiasing;
}

body {
  background-color: $orange;
  padding: 25px;
}

.monitor {
  
  margin: 0 auto 15px auto;
  width: 225px;
  position: relative;
  height: 140px;
  background-color: $red;
  border-bottom: 25px solid $cream;
  border-radius: 6px;
  padding: 8px;
  
  &:after {
    $dot-size: 5px;
    width: $dot-size;
    height: $dot-size;
    border-radius: $dot-size;
    position: absolute;
    display: block;
    content: " ";
    background-color: $red;
    bottom: -15px;
    left: 50%;
    margin-left: -$dot-size/2;
  }
  
  .screen {
    
    width: 100%;
    height: 100%;
    background-color: $orange;
    padding: 55px 40px 0 40px;
    @include animation(screenon 2s infinite);
    
    .loading {
      
      $load-bar-size: 8px;
      
      position: relative;
      width: 40%;
      height: $load-bar-size;
      border-radius: $load-bar-size;
      background-color: $red;
      margin: 0 auto;
      opacity: 0;
      @include animation(screenon 2s 0.5s infinite);
      
      &:before,&:after {
        
        display: block;
        content: " ";
        
      }
      
      &:before {
        
        position: absolute;
        width: $load-bar-size;
        height: $load-bar-size;
        border-radius: $load-bar-size;
        background-color: $white;
        left: 50%;
        margin-left: -$load-bar-size/2;
        top: -$load-bar-size*2;
        
      }
      
      &:after {
        
        width: 100%;
        height: $load-bar-size;
        border-radius: $load-bar-size;
        background-color: $white;
        
      }
      
    }
    
  }
  
  .stand {
    position: absolute;
    bottom: -45px;
    left: 50%;
    margin-left: -25px;
    height: 20px;
    width: 50px;
    background-color: $red;
  }
  
}

.peripherals {
  
  $peripheral-color: $cream;
  $peripheral-height: 13px;
  
  position: relative;
  width: 225px;
  border-bottom: 4px solid $red;
  margin: -($peripheral-height / 2) auto;
  text-align: center;
  
  >*{
    display: inline-block;
    margin-bottom: -7px;
  }

  .keyboard {
    border-bottom: $peripheral-height solid $peripheral-color;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-radius: 5px;
    height: 0;
    width: 100px;
  }

  .mouse {
    position: absolute;
    bottom: 3px;
    right: -3px;
    width: 30px;
    height: $peripheral-height;
    border-radius: 4px;
    background-color: $peripheral-color;
  }
  
}