// Some vars
$app-width: 140px;
$app-height: 170px;
$app-border: #555455;
$app-border-width: 4px;
$app-border-radius: 14px;
$app-background: #d7e4e7;
$app-top-height: 28px;
$app-body-height: ($app-height - $app-top-height - ($app-border-width * 2));

$gradient-start: #95c1cb;
$gradient-end:   $app-background;

$feet-offset: ($app-border-radius);

$freezer-height: 95px;
$fridge-height: 250px;
$fridge-offset: ($fridge-height - $app-height);
$fridge-hinge:  1px;
$fridge-hinge-offset: (0 - $fridge-height - $fridge-hinge);
$fridge-body-height: ($fridge-height - $freezer-height - ($app-border-width * 2));

$handle-border: 3px;
$handle-width:  5px;

// Container
[role="presentation"] {
  margin: 0;
  padding: 0;
  list-style: none;
}

// Base
[role="presentation"] > li {
  float: left;
  position: relative;
  margin-top: $fridge-offset;
  width: $app-width;
  height: $app-height;
  border: $app-border-width solid $app-border;
  border-radius: $app-border-radius;
  background-color: $app-background;
  background-image: linear-gradient(to right, $gradient-start 15%, $gradient-end 15%);
  
  &::before,
  &::after {
    position: absolute;
    bottom: -($app-border-width * 2);
    width: ($app-border-width * 2);
    height: 0;
    border: $app-border-width solid transparent;
    border-top-color: $app-border;
    border-bottom-width: 0;
    content: '';
  }
  
  &::before {
    left: $feet-offset;
  }
  
  &::after {
    right: $feet-offset;
  }
  
  // States
  &.fridge {
    margin-top: 0;
    height: $fridge-height;
    &::after {
      box-shadow: 0 $fridge-hinge-offset 0 $fridge-hinge $app-border;
    }
  }
  
  & + li {
    margin-left: 80px;
  }
}

// Button
button {
  display: block;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  width: 4px;
  height: 4px;
  //border: $app-border-width solid $app-border;
  border: 0;
  border-radius: 100%;
  box-sizing: content-box;
  box-shadow: 0 0 0 $app-border-width $app-border;
  background-color: transparent;
}

// Fridge Elements
.fridge {
  .freezer,
  .body {
    position: relative;
    &::before,
    &::after {
      position: absolute;
      top: 7px;
      right: 4px;
      width: 3px;
      height: 45px;
      border-radius: 5px;
      background-color: #fff;
      content: '';
    }
  }
  
  .handle {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 4px;
    width: $handle-width;
    border: $handle-border solid $app-border;
    border-radius: 5px;
    background-color: #f9ac3b;
    box-sizing: content-box;
  }
  .freezer {
    height: $freezer-height;
    border-bottom: $app-border-width solid $app-border;
    .handle {
      top: 20px;
    }
    &::before {
      display: none;
    }
    &::after {
      bottom: 7px;
      height: auto;
    }
  }
  
  .body {
    height: $fridge-body-height;
    .handle {
      bottom: 40px;
    }
    
    &::before {
      top: 62px;
      height: auto;
      bottom: 7px;
    }
  }
}

// Washingmachine Elements
.washingmachine {
  .top {
    display: flex;
    align-items: stretch;
    height: $app-top-height;
    border-bottom: $app-border-width solid $app-border;
    
    .input {
      position: relative;
      width: 32%;
      &::before {
        position: absolute;
        top: 50%;
        right: 10px;
        left: 10px;
        border: 2px solid $app-border;
        border-radius: 4px;
        transform: translateY(-50%);
        content: '';
      }
    }
    
    .dials {
      position: relative;
      flex: 1;
      border-left: $app-border-width solid $app-border;
      border-top-right-radius: $app-border-radius; // this should really be smaller than the outer radius, but you can't tell the difference; so it doesn't really matter at this point
      background-color: $app-background;
      background-image: linear-gradient(to right, $gradient-start 12%, $gradient-end 12%);
      
      button {
        position: absolute;
        top: 50%;
        left: 20%;
        transform: translateY(-50%);
      }
      
      &::before,
      &::after {
        position: absolute;
        content: '';
      }
      
      &::before {
        top: 6px;
        right: 4px;
        bottom: 3px;
        width: 3px;
        border-radius: 5px;
        background-color: #fff;
      }
      
      &::after {
        display: block;
        top: 50%;
        right: 16px;
        transform: translateY(-50%);
        width: 20px;
        height: 4px;
        border: $app-border-width solid $app-border;
        background-color: #f9ac3b;
      }
    }
  }
  .body {
    position: relative;
    height: $app-body-height;
    
    &::before,
    &::after {
      position: absolute;
      top: 6px;
      right: 4px;
      width: 3px;
      height: 15px;
      border-radius: 5px;
      background-color: #fff;
      content: '';
    }
    
    &::after {
      top: 27px;
      bottom: 7px;
      height: auto;
    }
  }
  .window {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 68px;
    border: $app-border-width solid $app-border;
    border-radius: 100%;
    background-color: $app-background;
    overflow: hidden;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 7px #f9ac3b, 0 0 0 11px $app-border;
    
    &::before,
    &::after {
      $offset: (0 - $app-border-width);
      $offset: 0;
      display: block;
      position: absolute;
      top: $offset;
      right: $offset;
      bottom: $offset;
      left: $offset;
      border-radius: 100%;
      content: '';
    }
    
    $translate: 6px;
    &::before {
      box-shadow: 0 0 0 $translate #fff;
      transform: translateX((0 - $translate));
    }
    
    &::after {
      box-shadow: 0 0 0 $translate $gradient-start;
      transform: translateX($translate);
    }
  }
}

// Dishwasher
.dishwasher {
  display: flex;
  flex-direction: column;
  .top {
    position: relative;
    flex-basis: $app-top-height;
    border-bottom: $app-border-width solid $app-border;
    
    .handle {
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 4px;
      border: $app-border-width solid $app-border;
      border-top: 0;
      box-sizing: content-box;
      background-color: #f9ac3b;
    }
    
    button {
      position: absolute;
      top: 50%;
      left: 12px;
      transform: translateY(-50%);
      background-color: #f9ac3b;
    }
    
    &::before,
    &::after {
      position: absolute;
      content: '';
    }
    
    &::before {
      top: 6px;
      right: 4px;
      width: 3px;
      height: 15px;
      border-radius: 5px;
      background-color: #fff;
    }
    
    &::after {
      $size: 6px;
      display: block;
      top: 50%;
      right: 12px;
      width: $size;
      height: $size;
      border-radius: 100%;
      background-color: $app-border;
      transform: translate(-50%, -50%);
      box-shadow: (0 - $size - 3) 0 0 0 $app-border; // the last number is the offset between the two buttons
    }
  }
  .body {
    position: relative;
    flex: 1;
    
    &::before,
    &::after {
      position: absolute;
      top: 6px;
      right: 4px;
      width: 3px;
      height: 15px;
      border-radius: 5px;
      background-color: #fff;
      content: '';
    }
    
    &::after {
      top: 27px;
      bottom: 7px;
      height: auto;
    }
  }
}

// Unimportant bits
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Avernir Next', Avernir, Helvetica, Arial sans-serif;
  background-color: #fffbe9;
}

.credit {
  position: fixed;
  right: 20px;
  top: 20px;
  margin: 0;
  color: $app-border;
  font-size: 14px;
  font-family: Avenir Next, Helvetica Neue, sans-serif;
  
  // The CodePen preview/thumbnail window is 300px in height
  @media (min-height: 350px) {
    top: auto;
    bottom: 20px;
  }
  
  a {
    display: inline-block;
    color: $app-border;
    text-decoration: none;
    border-bottom: 1px dashed rgba(100,100,100,.3);
    transition: border-color ease-out .15s;
  
    &:focus,
    &:hover {
      border-bottom-color: $app-border;
    }
  }
}