@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,300);

$clock-size: 200px;



$face-color: #FAFAFA;
$ring-background: #3F51B5;
$rign-background-bottom: #D50000;
$ring-outline-color: #BDBDBD;
$day-background: #FAFAFA;
$day-border-color: #212121;
$day-color: #212121;
$label-color: #212121;
$frame-color: #BDBDBD;
$digit-color: #212121;
$marker-color: #212121;
$hours-background: #E0E0E0;
$hours-outline-color: #BDBDBD;
$minutes-background: #E0E0E0;
$minutes-outline-color: #BDBDBD;
$seconds-color: #9E9E9E;
$strap-background: #E0E0E0;
$strap-outline-color: #BDBDBD;
$wheel-background: #E0E0E0;
$wheel-outline-color: #BDBDBD;
$day-border-width: 1px;
$border-width: 1px;
$frame-width: $border-width;
$strap-outline-width: $border-width;
$strap-height: $clock-size/3*2;
$strap-offset: $strap-height/4*5;
$strap-width: $clock-size/1.5;
$ring-size: $clock-size*1.3;
$clock-wrapper-size: $clock-size*1.3;
$strap-part-radius: 3px;
$ring-outline-width: $border-width;
$wheel-outline-width: $border-width;


@function dots ($n, $m, $d, $r, $c) {
  $sh: ();
  @for $j from 0 to $n {
    $cr: ($n%$m)*2*$r/$n;
    $cr: 2*$d + min($cr, 2*$r/$m - $cr);
    $offx: $cr*cos($j*2*pi()/$n);
    $offy: $cr*sin($j*2*pi()/$n);
    $sh: $sh, $offx $offy $c;
  }
  @return $sh
}

body {
  background: #212121;
  margin: 0;
}


.clock {
  position: absolute;
  height: $clock-wrapper-size;
  width: $clock-wrapper-size;
  top: 50%;
  left: 50%; 
  margin: $clock-wrapper-size/-2;
}

.connect {
  $size: $clock-size + 20;
  $size2: $ring-size + 50;
  position: absolute;
  top: 50%;
  left: 50%;
  height: $size2;
  width: $size;  
  margin: $size2/-2 $size/-2;
  overflow: hidden;
  &:before {
    content: '';
  
    $size: $clock-size - 20;
    height: $size;
    width: $size;
    background: $strap-background;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: $size/-2;
    box-shadow: 
      0 0 0 2px $strap-outline-color,
      0 0 10px rgba(0,0,0,0.5) inset;
    transform: 
      scale(0.8,1.4) 
      skew(45deg,-45deg);
  }
}

.strap {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 0;
  width: 0;
  &-1,
  &-0 {
    position: absolute;
    top: 50%;
    left: 50%;
    height: $strap-height;
    width: $strap-width;
    margin: $strap-height/-2 $strap-width/-2;
  }
  &-1 {
    transform: 
      rotate(180deg)
      translatey($strap-offset);
  }
  &-0 {
    transform: 
      translatey($strap-offset);
  }
  .part {
    position: relative;
    width: 100%;
    height: (100%/3);
    border-radius: $strap-part-radius;
    background-color: $strap-background;
    background-image: 
      linear-gradient(to top, 
        rgba(0,0,0,0.8),
        rgba(255,255,255,0.4) 5%,
        rgba(0,0,0,0.3) 10%,
        rgba(0,0,0,0.1) 85%,
        rgba(255,255,255,0.4) 95%,
        rgba(0,0,0,0.8)),
      linear-gradient(to bottom, 
        rgba(0,0,0,0.3) 10%,
        rgba(255,255,255,0.1) 30%),
      linear-gradient(to top, 
        rgba(0,0,0,0.3),
        rgba(255,255,255,0.3));
    box-shadow: 0 0 0 $strap-outline-width $strap-outline-color inset;
    &:before {
      content: '';
      position: absolute;
      z-index: 1;
      top: 10%;
      right: 20%;
      bottom: -10%;
      left: 20%;
      background: inherit;
      box-shadow: inherit;
      border-radius: inherit;
    }
  }
}

.day {
  position: absolute;
  top: 50%;
  right: ($clock-size/5);
  height: ($clock-size/30*2);
  line-height: ($clock-size/30*2);
  width: ($clock-size/10);
  margin: ($clock-size/-30) 0;
  text-align: center;
  font-size: ($clock-size/40*2);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  background: $day-background;
  color: $day-color;
  box-shadow: 0 0 0 $day-border-width $day-border-color;
  
}
.label {
  position: absolute;
  top: ($clock-size/3.3);
  left: 50%;
  height: 1em;
  line-height: 1em;
  width: 200px;
  margin: 0 -100px;
  text-align: center;
  font-family: 'Roboto slab', serif;
  font-weight: 400;
  font-size: ($clock-size/20);
  color: $label-color;  
}

.face {
  position: absolute;
  height: $clock-size;
  width: $clock-size;
  top: 50%;
  left: 50%;
  margin: $clock-size/-2;
  border-radius: 100%;
  background: $face-color;
  overflow: hidden;
  box-shadow: 0 0 0 $frame-width $frame-color;
}

.ring {
  position: absolute;
  height: $ring-size;
  width: $ring-size;
  top: 50%;
  left: 50%;
  margin: $ring-size/-2;
  border-radius: 100%;
  overflow: hidden;
  background-color: $ring-background;
  background-image:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0.3) 54%, 
      rgba(255,255,255,0.1) 56%,
      rgba(0,0,0,0.2) 56.7%,
      rgba(0,0,0,0.1) 64%,
      rgba(255,255,255,0.1) 65%,
      rgba(0,0,0,0.1) 66.5%,
      rgba(0,0,0,0.6) 100%),
    linear-gradient(to bottom,
    transparent 50%, $rign-background-bottom 50%);
  box-shadow: 
    //0 0 0 $ring-outline-width $ring-outline-color,
    0 0 0 4px rgba(0,0,0,0.2) inset,
    0 0 0 8px $strap-outline-color inset,
    0 0 5px 8px rgba(0,0,0,0.9) inset,
    0 0 5px 8px rgba(255,255,255,0.1) inset,
    0 0 5px 8px rgba(0,0,0,0.5) inset,
    0 0 5px 15px rgba(255,255,255,0.1) inset;
  
  
  &:after {
    position: absolute;
    box-shadow: 
      dots(
        ($clock-size/5px),
        ($clock-size/5px + 1),
        $clock-size/40,
        $clock-size/2.8, 
        darken($strap-outline-color,30%));   
    content: '';
    width: 14px;
    height: 14px;
    top: 50%;
    left: 50%;
    border-radius: 100%;
    margin: -7px;
    display: block;
    background: green;

  }

}

  .wheel {
    position: absolute;
    top: 50%;
    left: 100%;
    height: ($clock-size/10);
    width: ($clock-size/20);
    margin: ($clock-size/-20) 0;
    background-color: $wheel-background;
    background-image:
      linear-gradient(to top,
      rgba(0,0,0,0.5),
      rgba(0,0,0,0.2),
      rgba(0,0,0,0.5));
    border-radius: 0 4px 4px 0;
   }

.arms {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.markers {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 0;
  width: 0;
  transform: 
    rotate(-180deg)
    rotatey(-180deg);
  
  .marker {

    position: absolute;
    top: 50%;
    left: 50%;
    background: $marker-color;
    transform: 
      rotatex(-180deg);
    
    .digit {
      position: absolute;
      top: 100%;
      left: 50%;
      width: ($clock-size/10);
      line-height: 1;
      margin-left: ($clock-size/-20);
      text-align: center;
      color: $digit-color;
      font-family: 'Roboto slab', serif;
      font-size: ($clock-size/10);
      font-weight: 300;
    }
    

    
    &.hour {
      $marker-height: ($clock-size/30*2);
      $marker-width: 2px; 
      height: $marker-height;
      width: $marker-width;
      margin: $marker-height/-2 $marker-width/-2;
      @for $i from 0 to 60 {
        &:nth-child(#{$i + 1}) {
          transform:
            rotate(360deg/60*$i)
            translatey($clock-size/2 - $marker-height/2)
            rotatex(-180deg);
        }
       
      }      
    }
  &.quater {
      $marker-height: ($clock-size/10);
      $marker-width: 2px; 
      height: $marker-height;
      width: $marker-width;
      margin: $marker-height/-2 $marker-width/-2;
      @for $i from 0 to 60 {
        &:nth-child(#{$i + 1}) {
          transform:
            rotate(360deg/60*$i)
            translatey($clock-size/2 - $marker-height/2)
            rotatex(-180deg);
          .digit {
            transform: rotate(360deg/60*$i);
          }
        }
       
      }      
    }
    &.minute {
      $marker-height: ($clock-size/30);
      $marker-width: 1px; 
      height: $marker-height;
      width: $marker-width;
      margin: $marker-height/-2 $marker-width/-2;
      @for $i from 0 to 60 {
        &:nth-child(#{$i + 1}) {
          transform:
            rotate(360deg/60*$i)
            translatey($clock-size/2 - $marker-height/2);
        }
      }      
    }
  }
}


.arm {
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 50%; 
  transform: rotate(-90deg);
  &.seconds {
    $height: 4px;
    $width: 50%;
    $offset: 10%;
    width: $width;
    height: $height;
    margin-top: $height/-2;    
    background: $seconds-color;
    left: $width - $offset;
    transform-origin: 2 * $offset 50%;
    &:before {
      $size: $clock-size/15; 
      content: '';
      height: $size;
      width: $size;
      background: inherit;
      position: absolute;
      top: 50%;
      left: 2 * $offset;
      margin: $size/-2;
      border-radius: 100%;
    }
    &:after {
      $size: $clock-size/20;
      content: '';
      height: $size;
      width: $size;
      background: inherit;
      position: absolute;
      top: 50%;
      right: 20%;
      margin: $size/-2;
      border-radius: 100%;
    }
  }
  &.minutes {
    $size: $clock-size/15;
    width: 35%;
    height: $size;
    margin-top: $size/-2;
    background: $minutes-background;
    box-shadow: 0 0 0 $size/3 $minutes-outline-color inset;
    &:before {
      content: '';
      height: $size;
      width: $size;
      background: inherit;
      box-shadow: inherit;
      position: absolute;
      top: 50%;
      left: 0;
      margin: $size/-2;
      border-radius: 100%;
    }
    &:after {
      position: absolute;
      top: 50%;
      content: '';
      height: 0;
      width: 0;
      left: 100%;
      margin: $clock-size/-27.5 0;
      border: $clock-size/27.5 solid transparent;
      border-right: 0;
      border-left: $clock-size/15 solid $minutes-outline-color;
    }
  }
  &.hours {
    $size: $clock-size/15;
    $parts: 3;
    position: absolute;
    top: 50%;
    left: 50%;
    height: $size;
    width: $size*3;
    margin: $size/-2 0;
    background: $hours-background;
    box-shadow: 0 0 0 $size/3 $hours-outline-color inset;
    &:before, &:after {
      content: '';
      position: absolute;
      top: 50%;
      z-index: 0;
    }
    &:before {
      height: 0;
      width: 0;
      left: 100%;
      margin: $clock-size/-20;
      border: $clock-size/20 solid transparent;
      border-top: right;
      border-left: $clock-size/4 solid $hours-outline-color;
    }
    &:after {
      height: 0;
      width: 0;
      left: 100%;
      margin: $clock-size/-40;
      border: $clock-size/40 solid transparent;
      border-right: 0;
      border-left: $clock-size/8 solid $hours-background;
    }
    .base {
      $size: $clock-size/10;
      position: absolute;
      height: $size;
      width: $size;
      z-index: 1;
      right: 100%;
      top: 50%;
      margin:$size/-2;
      overflow: hidden;
      border-radius: 100%;
      background: $hours-background;
      box-shadow: 0 0 0 $size/5 $hours-outline-color;
    }
    .star {
      position: absolute;
      height: $size;
      width: $size;
      z-index: 1;
      right: 0;
      top: 50%;
      margin: $size/-2;
      overflow: hidden;
      border-radius: 100%;
      background: $hours-background;
      box-shadow: 0 0 0 $size/5 $hours-outline-color;

      .part {
        position: absolute;
        top: 50%;
        left: 50%;
        height: $size;
        width: $size;
        display: block;
        box-shadow: 0 0 0 $size/20 $hours-outline-color inset;
        margin: $size/-2;
        @for $i from 0 to $parts {
          &:nth-child(#{$i + 1}) {
           transform: 
              rotate(360deg/$parts*$i)
              translatey(100%)
              scale(1.75,1)
              skew(45deg,-45deg);
          }
        }
      }
    }
  }
}