@import "lesshat";

@color: black;

body {
  background: #e6e6e6;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 0;
  
  li {
    width: 64px;
    height: 64px;
    border: 39px solid white;
    background: #FFF;
    display: inline-block;
    position: relative;
    vertical-align: top;
    margin: 5px;
    
    &:after {
      background: rgba(0, 100, 255, 0.1);
      width: 2px;
      height: 100%;
      position: absolute;
      left: 50%;
      margin-left: -1px;
      content: '';
    }
    
    &:before {
      background: rgba(0, 100, 255, 0.1);
      height: 2px;
      width: 100%;
      position: absolute;
      top: 50%;
      margin-top: -1px;
      content: '';
    }
    
    /* comment this ↓ to see the middle of the box */
    &:after, &:before { content: normal; }
  }
}

.icon {
  position: relative;  
  display: inline-block;
  
  .box-sizing;
  
  &:after, &:before {
    content: '';
    position: absolute;
    
    .box-sizing;
  }
}

.arrow {
  
  &-previous, &-next, &-bottom, &-top {
    width: 100%;
    height: 100%;
  
    &:before, &:after {
      width: 39px;
      height: 2px;
      background: @color;
      content: '';
      position: absolute;
      top: 50%;
    }
    
    &:before { .rotate(-44deg); }
    &:after  { .rotate(44deg); }
  }
  
  &-previous {
    &:before, &:after {
      left: 25%;
      .transform-origin(0, 0);
    }
  }
  
  &-next {
    &:before, &:after {
      right: 25%;
      .transform-origin(100%, 100%);
    }
  }
  
  &-bottom {
    &:before, &:after {
      .transform-origin(50%, 0);
    }
    
    &:before { left: 0;  .rotate(46deg);  }
    &:after  { right: 0; .rotate(-46deg); }
  }
  
  &-top {
    &:before, &:after {
      .transform-origin(50%, 100%);
    }
    
    &:before { left: 0;  .rotate(-46deg);  }
    &:after  { right: 0; .rotate(46deg); }
  }
}

.arrow {
  &-right, &-left {
    height: 2px;
    width: 55px;
    background: @color;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    
    &:after {
      content: '';
      position: absolute;
      width: 25px;
      height: 25px;
      bottom: 1px;
      border: 2px solid @color;
    }
  }
  
  &-right:after {
    .rotate(-45deg);
    .transform-origin(100%, 100%);
    border-left: none;
    border-top: none;
    right: -1px;
  }
  
  &-left:after {
    .rotate(45deg);
    .transform-origin(0, 100%);
    border-right: none;
    border-top: none;
    left: -1px;
  }
}

.smart-phone {
  width: 28px;
  height: 54px;
  border: 2px solid @color;
  border-radius: 4px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -25px 0 0 -14px;
  
  &:after {
    content: '';
    position: absolute;
    width: 100%;
    top: 4px;
    bottom: 5px;
    border: 2px solid @color;
    border-left: 0;
    border-right: 0;
  }
  
  &:before {
    position: absolute;
    content: '';
    left: 50%;
    bottom: 1px;
    width: 3px;
    height: 3px;
    margin-left: -1px;
    background: @color;
    border-radius: 100%;
  }
}

.information-button {
  width: 56px;
  height: 56px;
  border: 2px solid @color;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -28px auto auto -28px;
  
  &:before {
    width: 4px;
    height: 4px;
    background: @color;
    border-radius: 100%;
    left: 50%;
    margin-left: -2px;
    top: 10px;
  }
  
  &:after {
    width: 4px;
    height: 25px;
    background: @color;
    border-radius: 10px;
    left: 50%;
    margin-left: -2px;
    bottom: 10px;
  }
}

.speech-bubble {
  width: 56px;
  height: 40px;
  border: 2px solid @color;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -28px;
  box-shadow: inset 10px 0 0 0 white,
              inset -10px 0 0 0 white,
              inset 0 13px 0 0 white, 
              inset 0 15px 0 0 @color,
              inset 0 -13px 0 0 white,
              inset 0 -15px 0 0 @color;  

  &--no-text {
    box-shadow: none;
  }
  
  &:before {
    width: 0; 
    height: 0; 
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent; 
    border-right: 9px solid @color; 
    bottom: -14px;
    left: 10px;
    
    .rotate(45deg);
  }
  
  &:after {
    width: 0; 
    height: 0; 
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent; 
    border-right: 9px solid white; 
    bottom: -9px;
    left: 12px;
    
    .rotate(45deg);
  }
}

.bullet-list {
  width: 6px;
  height: 6px; 
  background: white;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 6px;
  margin: -3px 0 0 0;
  
  box-shadow: 0 20px 0 0 white,
              0 -20px 0 0 white, 
              0 0 0 2px @color,
              0 -20px 0 2px @color,
              0 20px 0 2px @color;
  
  &:after {
    background: @color;
    width: 32px;
    height: 2px;
    left: 18px;
    top: 50%;
    margin: -1px 0 0 0;
    box-shadow: 0 -20px 0 0 @color,
                0 20px 0 0 @color;
  }
}

.scale {
  width: 62px;
  height: 18px;
  border: 2px solid @color;
  top: 50%;
  left: 50%;
  margin: -18px 0 0 -31px;
  
  background: linear-gradient(
    to right, 
    transparent 66.66%, @color 33.33%
  );
  background-size: 3px 6px;
  background-repeat: repeat-x;
  background-position: bottom left;
  
  .rotate(45deg);
  
  &:after {
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to right, 
      transparent 90%, @color 10%
    );
    background-size: 15px 8px;
    background-repeat: repeat-x;
    background-position: bottom left;
  }
}

.credit-card {
  width: 56px;
  height: 40px;
  border: 2px solid @color;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -28px;
  border-radius: 3px;
  
  &:after {
    width: 100%;
    height: 6px;
    top: 7px;
    left: 0;
    background: @color;
  }
  
  &:before {
    width: 16px;
    height: 5px;
    right: 5px;
    bottom: 7px;
    background: @color;
  }
}

.calendar-tick {
  width: 54px;
  height: 52px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -26px 0 0 -27px;
  border: 2px solid @color;
  box-shadow: inset 0 9px 0 0 white,
              inset 0 11px 0 0 @color;
  
  &:after {
    width: 20px;
    height: 14px;
    border: 2px solid @color;
    border-top: 0;
    border-right: 0;
    
    .rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -7px 0 0 -10px;
  }
  
  &:before {
    width: 2px;
    height: 10px;
    background: @color;
    left: 6px;
    top: -6px;
    
    box-shadow: 9px 0 0 0 @color,
                18px 0 0 0 @color,
                27px 0 0 0 @color,
                36px 0 0 0 @color;
  }
}

.outcoming {
  position: absolute;
  width: 32px;
  height: 46px;
  border: 2px solid @color;
  border-right: 0;
  top: 50%;
  left: 5px;
  margin-top: -23px;
  
  &:after {
    width: 46px;
    height: 2px;
    background: @color;
    top: 50%;
    left: 6px;
    margin-top: -1px;
  }
  
  &:before {
    width: 20px;
    height: 20px;
    right: -24px;
    top: 50%;
    margin-top: -20px;
    border: 2px solid @color;
    border-top: 0;
    border-left: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    
    .rotate(-45deg);
    .transform-origin(100%, 100%);
  }
}

.clock {
  width: 56px;
  height: 56px;
  border: 2px solid @color;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -28px 0 0 -28px;
  
  &:after {
    width: 19px;
    height: 21px;
    border: 2px solid @color;
    border-left: 0;
    border-top: 0;
    bottom: 50%;
    right: 50%;
    margin: 0 -1px -1px 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
}

.mail {
  width: 56px;
  height: 36px;
  border: 2px solid @color;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -18px 0 0 -28px;
  
  &:before, &:after {
    background: @color;
    width: 33px;
    height: 2px;
    top: 2px;
  }
  
  &:before {
    .rotate(34deg);
    .transform-origin(0, 0);
  }
  
  &:after {
    right: 0;
    .rotate(-34deg);
    .transform-origin(100%, 0);
  }
}

.add {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -28px 0 0 -3px;
  
  &, &:before {
    background: @color;
    height: 56px;
    width: 6px;
    border-radius: 10px;
  }
  
  &:before {
    .rotate(90deg);
  }
}

.bookmark {
  width: 42px;
  height: 56px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -28px 0 0 -21px;
  border: 2px solid @color;
  border-bottom: 0;
  
  &:after {
    width: 30px;
    height: 30px;
    border: 2px solid @color;
    border-right: 0;
    border-bottom: 0;
    top: 100%;
    left: 50%;
    margin: -15px 0 0 -15px;
    box-sizing: border-box;
    moz-box-sizing: border-box;
    
    .rotate(45deg);
  }
}

.portfolio {
  width: 50px;
  height: 34px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -17px 0 0 -25px;
  border: 2px solid @color;
  box-shadow: inset 0 8px 0 0 white, 
              inset 0 10px 0 0 @color;
  
  &:before {
    width: 18px;
    height: 7px;
    border: 2px solid @color;
    border-bottom: 0;
    left: 50%;
    top: -9px;
    margin: 0 0 0 -9px;
    box-sizing: border-box;
    moz-box-sizing: border-box;
  }
  
  &:after {
    width: 4px;
    height: 4px;
    background: white;
    left: 7px;
    top: 10px;
    box-shadow: 0 0 0 1px @color,
                28px 0 0 0 white,
                28px 0 0 1px @color;
  }
}

.hierarchy {
  width: 7px;
  height: 7px;
  background: white;
  position: absolute;
  left: 43px;
  top: 50%;
  margin-top: -4px;
  box-shadow: 0 -19px 0 0 white, 
              0 19px 0 0 white, 
              0 0 0 2px @color, 
              0 -19px 0 2px @color, 
              0 19px 0 2px @color,
              -28px 0 0 2px white,
              -28px 0 0 4px @color;
  
  &:before {
    width: 10px;
    height: 41px;
    border: 2px solid @color;
    border-right: 0;
    top: -17px;
    left: -12px;
    
    .box-sizing;
  }
  
  &:after {
    width: 15px;
    height: 2px;
    background: @color;
    left: -17px;
    top: 50%;
    margin-top: -1px;
  }
}

.converging-arrows {
  width: 78px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1px 0 0 -39px;
  box-shadow: inset 32px 0 0 0 @color, 
              inset -32px 0 0 0 @color;
  
  .rotate(-45deg);
  .transform-origin(50%, 50%);
  
  &:before, &:after {
    width: 20px;
    height: 20px;
    border: 2px solid @color;
    top: 50%;
    margin-top: -10px;
    
    .box-sizing;
    .rotate(45deg);
    .transform-origin(50%, 50%);
  }
  
  &:before {
    left: 10px;
    border-left: 0;
    border-bottom: 0;
  }
  
  &:after {
    right: 10px;
    border-right: 0;
    border-top: 0;
  }
}

.not-charging {
  width: 50px;
  height: 24px;
  border: 1px solid @color;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -12px 0 0 -25px;

  &:after {
    width: 60px;
    height: 1px;
    background: @color;
    left: 50%;
    top: 50%;
    margin: 0 0 0 -30px;
    box-shadow: 0 0 0 1px white;
    
    .rotate(45deg);
  }
  
  &:before {
    width: 5px;
    height: 10px;
    border: 1px solid @color;
    border-left: 0;
    right: -6px;
    top: 50%;
    margin-top: -5px;
  }
}

.battery {
  width: 44px;
  height: 24px;
  border: 1px solid @color;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -12px 0 0 -22px;
  
  &--two-bars:after, 
  &--three-bars:after, 
  &--four-bars:after {
    height: 16px;
    width: 5px;
    background: white;
    left: 3px;
    top: 3px;
  }
  
  &--two-bars:after {
    box-shadow: 0 0 0 1px @color,
                10px 0 0 0 white,
                10px 0 0 1px @color;
  }
  
  &--three-bars:after {
    box-shadow: 0 0 0 1px @color,
                10px 0 0 0 white,
                10px 0 0 1px @color,
                20px 0 0 0 white,
                20px 0 0 1px @color;
  }
  
  &--four-bars:after {
    box-shadow: 0 0 0 1px @color,
                10px 0 0 0 white,
                10px 0 0 1px @color,
                20px 0 0 0 white,
                20px 0 0 1px @color,
                30px 0 0 0 white,
                30px 0 0 1px @color;
  }
  
  &:before {
    width: 5px;
    height: 10px;
    border: 1px solid @color;
    border-left: 0;
    right: -6px;
    top: 50%;
    margin-top: -5px;
  }
}

.menu-three-lines {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -1px 0 0 -28px;
  
  &, &:after, &:before {
    width: 56px;
    height: 2px;
    background: @color;
  }
  
  &:before { top: -20px; }
  &:after  { bottom: -20px; }
}

.cross-out-mark {
  width: 84px;
  height: 2px;
  position: absolute;
  margin: -1px 0 0 -42px;
  
  .rotate(45deg);
  .transform-origin(50%, 50%);
  
  &, &:after {
    background: @color;
    left: 50%;
    top: 50%;
  }
  
  &:after {
    height: 84px;
    width: 2px;
    margin: -42px 0 0 -1px;
  }
}

.arrow-refresh {
  position: absolute;
  width: 54px;
  height: 54px;  
  border: 2px solid @color;
  border-radius: 100%;
  left: 50%;
  top: 50%;
  margin: -27px 0 0 -27px;
  
  &:before {
    width: 20px;
    height: 20px;
    background: white;
    right: -2px;
    bottom: 50%;
  }
  
  &:after {
    width: 12px;
    height: 12px;
    border: 2px solid @color;
    border-top: 0;
    border-left: 0;
    top: -6px;
    right: 6px;
    
    .rotate(-10deg);
    .transform-origin(100%, 100%);
  }
}

.wrong-sign {
  width: 56px;
  height: 56px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -28px 0 0 -28px;
  border: 1px solid @color;
  
  &:before, &:after {
    width: 40px;
    height: 1px;
    background: @color;
    top: 50%;
    left: 50%;
    margin-left: -20px;
  }
  
  &:before { .rotate(-45deg); }
  &:after  { .rotate(45deg);  }
}

.clapper {
  height: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -4px 0 0 -25px;
  
  &, &:before, &:after {
    width: 50px;
    border: 2px solid @color;
  }
  
  &:before, &:after {
    height: 8px;
    left: -2px;
    background-position: -8px 0;
    background-size: 8px 8px;
    
    background-image: -webkit-repeating-linear-gradient(-45deg, transparent, transparent 7px, @color 7px, @color 8px);
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 7px, @color 7px, @color 8px);
  }
  
  &:before {
    top: -8px;
  }
  
  &:after {
    top: -15px;
    
    .rotate(-15deg);
    .transform-origin(0, 100%);
  }
}

.tablet-locked {
  width: 36px;
  height: 56px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -28px 0 0 -18px;
  border: 2px solid @color;
  border-radius: 2px;
  box-shadow: inset 0 4px 0 0 white,
              inset 0 6px 0 0 @color,
              inset 0 -6px 0 0 white,
              inset 0 -8px 0 0 @color;
  
  &:before {
    width: 8px;
    height: 8px;
    border: 1px solid @color;
    border-radius: 100%;
    left: 50%;
    top: 17px;
    margin-left: -4px;
    box-shadow: 0 28px 0 -2px @color;
  }
  
  &:after {
    width: 12px;
    height: 10px;
    border-radius: 1px;
    top: 22px;
    left: 50%;
    border: 1px solid @color;
    background: white;
    margin-left: -6px;
  }
}

.storage {
  width: 40px;
  height: 54px;
  border: 2px solid @color;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -27px 0 0 -20px;
  
  &:before {
    width: 10px;
    height: 2px;
    background: @color;
    left: 50%;
    margin-left: -5px;
    top: 7px;
    box-shadow: 0 16px 0 0 @color,
                0 32px 0 0 @color;
  }
  
  &:after {
    width: 30px;
    height: 2px;
    background: @color;
    left: 50%;
    margin-left: -15px;
    top: 16px;
    box-shadow: 0 16px 0 0 @color;
  }
}

.card-and-machine {
  width: 56px;
  height: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -24px 0 0 -28px;
  
  &, &:before {
    border: 2px solid @color;
  }
  
  &:before, &:after {
    .transform(skew(160deg, 0deg));
  }
  
  &:before {
    width: 34px;
    height: 40px;
    border-radius: 3px;
    background: white;
    left: 3px;
    top: 5px;
    
    background-color: white;
    background: linear-gradient(
      to right, 
      white 55%, 
      @color 55%, @color 72%,
      white 72%
    );
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: bottom left;
  }
  
  &:after {
    width: 4px;
    height: 12px;
    background: @color;
    top: 27px;
    left: 7px;
  }
}

.aim-target {
  width: 40px;
  height: 40px;
  border: 2px solid @color;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -20px 0 0 -20px;
  
  &:before, &:after {
    width: 58px;
    height: 2px;
    box-shadow: inset 17px 0 0 0 @color,
                inset -17px 0 0 0 @color;
    top: 50%;
    left: 50%;
    margin: -1px 0 0 -29px;
  }
  
  &:after {
    .rotate(90deg);
  }
}

.box {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -14px 0 0 -28px;
  box-shadow: inset 12px 0 0 0 white,
              inset -12px 0 0 0 white,
              inset 0 5px 0 0 white,
              inset 0 7px 0 0 @color;
  
  &, &:before, &:after {
    border: 2px solid @color;
    background: white;
  }
  
  &, &:before {
    width: 40px;
  }
  
  &:before {
    height: 13px;
    border-bottom: 0;
    top: -15px;
    left: 6px;
    box-shadow: inset 17px 0 0 0 white, 
                inset 19px 0 0 0 @color;
    
    .transform(skew(130deg, 0deg));
  }
  
  &:after {
    height: 39px;
    width: 16px;
    border-left: 0;
    border-top: 0;
    top: -8px;
    left: 38px;
        
    .transform(skew(0deg, 139deg));
  }
}

.window-computer {
  width: 58px;
  height: 58px;
  border: 2px solid @color;
  position: absolute;
  left: 50%;
  top: 50%;
  background: white;
  margin: -29px 0 0 -29px;
  box-shadow: inset 0 9px 0 0 white,
              inset 0 11px 0 0 @color;
  
  &:before, &:after {
    background: @color;
    height: 3px;
    top: 3px;
  }
  
  &:before {
    width: 12px;
    left: 3px;
  }
  
  &:after {
    width: 3px;
    right: 3px;
    border-radius: 100%;
    box-shadow: -6px 0 0 0 @color;
  }
}

.circle-of-circles {
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background: white;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -28px 0 0 -3px;
  box-shadow: 17px 8px 0 0 white, 
              24px 25px 0 0 white, 
              17px 42px 0 0 white, 
              0 48px 0 0 white,
              -17px 42px 0 0 white,
              -24px 25px 0 0 white,
              -17px 8px 0 0 white,
              
              0 0 0 1px @color,
              17px 8px 0 1px @color,
              24px 25px 0 1px @color, 
              17px 42px 0 1px @color, 
              0 48px 0 1px @color,
              -17px 42px 0 1px @color,
              -24px 25px 0 1px @color,
              -17px 8px 0 1px @color;
}

.window-plus {
  width: 38px;
  height: 38px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -12px 0 0 -26px;
  border: 2px solid @color;
  box-shadow: 14px -14px 0 -2px white, 
              14px -14px 0 0 @color;
  
  &:before, &:after {
    background: @color;
    left: 50%;
    top: 50%;
  }
  
  &:before {
    width: 26px;
    height: 2px;
    margin: -1px 0 0 -13px;
  }
  
  &:after {
    width: 2px;
    height: 26px;
    margin: -13px 0 0 -1px;
  }
}

.stack {
  width: 54px;
  height: 36px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -11px 0 0 -27px;
  
  &, &:before, &:after {
    border: 2px solid @color;
  }
  
  &:before, &:after {
    border-bottom: 0;
  }
  
  &:before {
    width: 46px;
    height: 8px;
    left: 2px;
    top: -10px;    
  }
  
  &:after {
    width: 32px;
    height: 5px;
    left: 8px;
    top: -16px;    
  }
}

.bluethooth {
  height: 56px;
  width: 2px;
  background: @color;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -28px 0 0 -1px;
  
  &:before, &:after {
    width: 20px;
    height: 20px;
    left: 2px;

    border: 2px solid @color;
    border-left: 0;
  }
  
  &:before {
    top: 0px;
    .transform-origin(0, 0);
    .rotate(45deg);
  }
  
  &:after {
    bottom: 0;
    .transform-origin(0, 100%);
    .rotate(-45deg);
  }
}

/* MIXINS */

.rotate (@deg) {
	-webkit-transform: rotate(@deg);
	-moz-transform: 	 rotate(@deg);
	-ms-transform: 		 rotate(@deg);
	-o-transform: 		 rotate(@deg);
}

.transform-origin (@x:center, @y:center) {
	-webkit-transform-origin: @x @y;
	-moz-transform-origin:    @x @y;
	-ms-transform-origin:     @x @y;
	-o-transform-origin:      @x @y;
}

.box-sizing (@value:border-box) {
  box-sizing: @value;
  -moz-box-sizing: @value;
}

.transform(@string){
	-webkit-transform: @string;
	-moz-transform: 	 @string;
	-ms-transform: 		 @string;
	-o-transform: 		 @string;
}