$color-clock: #266DD3
$color-background: #CFB3CD

=size($width, $height)
  width: percentage($width / 100)
  height: percentage($height / 100)

=position($top, $left)
  position: absolute
  top: percentage($top / 100)
  left: percentage($left / 100)

body
  padding-top: 10vh
  background-color: $color-background

.clock-wrapper
  width: 80vw
  height: 80vw
  position: relative
  margin: auto

.clock
  +size(12, 12)
  +position(44, 44)
  border-radius: 50%
  background-color: lighten($color-clock, 50%)
  box-shadow: inset 0.2vw 0.2vw 0 0.1vw darken($color-clock, 25%)
  overflow: hidden

.clock-border
  +size(16, 16)
  +position(42, 42)
  border-radius: 50%
  background: linear-gradient(to bottom, darken($color-clock, 15%) 10%, darken($color-clock, 20%) 10%, darken($color-clock, 20%) 90%, darken($color-clock, 25%) 90%)
  background-size: 100% 16%
  box-shadow: 0.2vw 0.2vw 0 0.1vw darken($color-clock, 25%), inset 0.2vw 0.2vw 0.5vw 0 darken($color-clock, 5%), inset -0.2vw -0.2vw 0.5vw 0 darken($color-clock, 25%)

.clock-glass
  +size(100, 100)
  background: linear-gradient(to right, rgba($color-clock, 0.2), rgba($color-clock, 0) 40%)
  transform: rotate(45deg)
  +position(40, 40)

.watchstrap
  +size(7, 90)
  +position(5, 46.5)
  background: linear-gradient(darken($color-clock, 15%) 10%, darken($color-clock, 20%) 10%, darken($color-clock, 20%) 90%, darken($color-clock, 25%) 90%)
  background-size: 100% 2.5%
  border-radius: 1vw 1vw 2vw 2vw
  box-shadow: 0.2vw 0.2vw 0 0 darken($color-clock, 25%)

.point
  background-color: $color-background
  +size(15, 15 * 7 / 90)
  margin-bottom: 2vw
  border-radius: 50%
  box-shadow: inset 0.2vw 0.2vw 0 0 darken($color-clock, 15%)

  @for $n from 1 through 7
    &:nth-of-type(#{$n})
      +position(59 + 5 * $n, 43.5)

.buckle
  +size(8, 4)
  border-radius: 0.5vw
  background-color: $color-clock
  box-shadow: 0.3vw 0.2vw 0 0 darken($color-clock, 10%)
  +position(15, 45.9)

.hook-outer
  +size(6.5, 6.5)
  +position(0, 46.1)
  border-width: 2vw 0.7vw 0 0.7vw
  border-color: $color-clock
  border-style: solid
  border-radius: 1vw

.hook-inner
  +size(0.8, 6.5)
  +position(1, 49.6)
  background-color: darken($color-clock, 5%)
  border-radius: 0.3vw

.minute-hand
  +size(5, 43)
  +position(7, 47.5)
  background-color: lighten($color-clock, 10%)
  transform-origin: bottom
  border-radius: 2vw
  animation: move-hand 5s linear infinite

.hour-hand
  +size(5, 30)
  +position(20, 47.5)
  background-color: darken($color-clock, 10%)
  transform-origin: bottom
  border-radius: 2vw
  animation: move-hand 60s linear infinite

.ticks
  +size(100, 100)

  @for $n from 1 through 12
    .tick:nth-of-type(#{$n})
      @if (($n - 1) % 3) == 0
        +size(6, 50)
        +position(0, 47)
        background-color: darken($color-clock, 25%)
      @else
        +size(4, 50)
        +position(0, 48)
        background-color: darken($color-clock, 30%)
      transform-origin: bottom
      transform: rotate(30deg * ($n - 1))

.clock-inner
  +size(80, 80)
  +position(10, 10)
  border-radius: 50%
  background-color: lighten($color-clock, 50%)

.disc
  +size(8, 8)
  +position(46, 46)
  border-radius: 50%
  background-color: darken($color-clock, 30%)

.crown
  +size(1.5, 3)
  +position(48.75, 57.7)
  background: linear-gradient(to bottom, darken($color-clock, 30%) 80%, darken($color-clock, 35%) 80%)
  background-size: 100% 0.5vw
  border-radius: 1vw

@keyframes move-hand
  0%
    transform: rotate(0deg)
  100%
    transform: rotate(360deg)