$time-clock-radius       = 12vmin
$time-clock-inner-radius = 0.6vmin


.time__clock
  &__outer-circle
    position absolute

    top  50%
    left 50%

    background-color transparent
    border 0.5vmin solid #000

    border-radius $time-clock-radius

    width  ($time-clock-radius * 2)
    height ($time-clock-radius * 2)

    margin-top  ($time-clock-radius * -1)
    margin-left ($time-clock-radius * -1)


  &__inner-circle
    position absolute

    top  50%
    left 50%

    width  ($time-clock-inner-radius * 2)
    height ($time-clock-inner-radius * 2)

    border-radius $time-clock-inner-radius

    margin-top  ($time-clock-inner-radius * -1)
    margin-left ($time-clock-inner-radius * -1)

    background #000

  &__indicator
    display block
    position relative

    top  20%
    left 0

    width 100%

    text-align center

    font-size 3vmin

    opacity 0.4

  &__info
    display block
    position relative

    top  55%
    left 0

    width 100%

    text-align center

    font-size 2vmin


  &__hand
    width  $time-clock-radius * .87
    height 2px

    margin-top -1px

    background-color #000

    position absolute

    top  50%
    left 50%

    transform-origin left center

    &--hours
      width $time-clock-radius * .55

    &--seconds
      height 1px