.watch
  .stripe
    .holder
    .holder
  .clock
  .pointers-container
    .pointers-round
    .hour.pointer(data-pointer="hour")
    .minute.pointer(data-pointer="minute")
    .second.pointer(data-pointer="second")

// Colors
$pink: #e84f6d;
$purple: #26233d;
$white: #f4f4f4;
$beige: #f6c7a9;
$gold: #d9b6b3;
$black: #1b1d1d;
$pink-light: #e3cac2;
$background: lighten($pink-light, 6%);

// Sizes
$watch: 200px;

// Definitions
* {
  padding: 0;
  margin: 0;
}

body {
  background: $background;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
}

.watch {
  display: flex;
  align-items: center;
  justify-content: center;
}

.stripe {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  height: 100vh;
  width: ($watch / 1.3);
  background: $pink-light;
  box-shadow: 0 0 30px 5px rgba($black, 0.2);
  
  &:before,
  &:after {
    content: '';
    display: block;
    position: absolute;
    width: 30px;
    height: 15px;
    top: 2%;
    border-radius: 5px;
    background: $background;
    box-shadow: inset 0 0 5px rgba($black, 0.2);
  }
  
  &:after {
    top: 10%;
  }
}

.holder {
  display: block;
  position: absolute;
  width: 10%;
  height: $watch;
  background: $gold;
  box-shadow: 0 0 30px 5px rgba($black, 0.2);
  
  &:first-child {
    left: -10%;
    border-radius: 15px 0 0 15px;
  }
  &:last-child {
    right: -10%;
    border-radius: 0 15px 15px 0;
  }
}

.clock {
  width: 0;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  border: ($watch / 2) solid white;
  border-top-color: $beige;
  border-right-color: $purple;
  border-bottom-color: $pink;
  border-left-color: $white;
  
  border-radius: 50%;
  
  box-shadow:
    0 0 0 15px $black,
    0 0 0 20px $gold,
    0 0 30px 5px rgba($black, 0.2);
}

.pointers-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
 
  width: ($watch / 20);
  height: ($watch / 20);
}

.pointers-round {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: $white;
  border: ($watch / 50) solid $black;
  position: absolute;
  z-index: 4;
}

.pointer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
}

%pointer {
  content: '';
  display: block;
  width: 100%;
  height: 950%;
  background: $white;
  position: absolute;
  bottom: 0;
  border-radius: 15px;
  box-shadow: 0 0 5px $black;
}

.hour {
  z-index: 3;
  
  &:before {
    @extend %pointer;
    height: 650%;
  }
}

.minute {
  z-index: 2;

  &:before {
    @extend %pointer;
  }
}

.second {
  z-index: 1;

  &:before {
    @extend %pointer;
    width: 15%;
    border-radius: 200% 200% 0 0;
    background: $purple;
  }
}

!(function() {
  const pointers = {
    hour: document.querySelector('[data-pointer="hour"]'),
    minute: document.querySelector('[data-pointer="minute"]'),
    second: document.querySelector('[data-pointer="second"]')
  };

  const setPointers = (function setPointers() {
    const ANGLE = 360;
    const now = new Date();

    const getRotate = deg => `rotate(${deg}deg)`;

    pointers.hour.style.transform = getRotate(ANGLE / 12 * now.getHours());
    pointers.minute.style.transform = getRotate(ANGLE / 60 * now.getMinutes());
    pointers.second.style.transform = getRotate(ANGLE / 60 * now.getSeconds());
    
    return setPointers;
  })();

  setInterval(setPointers, 1000);
})();