* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/*
-- Values
*/

$belt-width: 140px;
$belt-height: 385px;
$watch-size: 280px;
$watch-border-size: 6px;
$watch-padding: 6px;
$label-size: 32px;
$dot-size: 8px;
$seconds-height: 90px;
$seconds-width: 2px;
$hours-height: 50px;
$hours-width: 3px;
$minutes-height: 85px;
$minutes-width: 3px;

/*
-- Colors
*/

$body-background-color: #eeeeee;
$text-color: #fff;
$belt: #212121;
$watch-color: #333333;
$watch-border-color: #000;
$red-label: #d32f2f;
$dot-color: #fff;
$seconds-color: #b71c1c;
$hours-color: #fff;
$minutes-color: #757575;

html {
  height: 100%;
}

body {
  color: #fff;
  height: 100%;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.5px;
  background-color: $body-background-color;
  display: flex;
  flex-direction: column;
}

/*
-- Flex
*/

.d-flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.align-items-center {
  align-items: center;
}
.justify-content-center {
  justify-content: center;
}
.justify-content-between {
  justify-content: space-between;
}
.flex-1 {
  flex-grow: 1;
}
.h-100 {
  height: 100%;
}
.w-100 {
  width: 100%;
}

/*
-- Smart Watch
*/

.watch-container {
  position: relative;
  width: $watch-size;

  &::after {
    content: "";
    position: absolute;
    height: $watch-size;
    width: $watch-size;
    background-color: $watch-color;
    -webkit-box-shadow: 0 0 60px 40px rgba(80, 80, 80, 0.1);
    -moz-box-shadow: 0 0 60px 40px rgba(80, 80, 80, 0.1);
    box-shadow: 0 0 60px 40px rgba(80, 80, 80, 0.1);
    border-radius: 50%;
    z-index: -1;
  }

  .watch {
    height: $watch-size;
    width: $watch-size;
    border: $watch-border-size solid $watch-border-color;
    background-color: $watch-color;
    padding: $watch-padding;
    border-radius: 50%;
    position: absolute;

    .pointers {
      position: absolute;
      left: 0;
      top: 0;

      //Pointer Globals
      .pointer-container.seconds,
      .pointer-container.minutes,
      .pointer-container.hours {
        .dot {
          height: $dot-size;
          width: $dot-size;
          border-radius: 50%;
          background-color: $dot-color;
          position: relative;
        }
      }

      //Pointer
      @mixin pointer($height, $width, $border-radius, $color) {
        height: $height;
        width: $width;
        border-radius: $border-radius;
        background-color: $color;
        position: absolute;
        bottom: 12px;
      }

      //Animation
      @mixin animation($animation-name, $time, $pointer-initial-position) {
        -webkit-animation: $animation-name $time infinite linear;
        -o-animation: $animation-name $time infinite linear;
        animation: $animation-name $time infinite linear;
        @keyframes #{$animation-name} {
          to {
            transform: rotateZ($pointer-initial-position + 360deg);
          }
        }
      }

      //Seconds Pointer
      .pointer-container.seconds {
        z-index: 2;
        transform: rotateZ(0deg);
        //Name, 1 minute, Pointer Position
        @include animation(animate-seconds, 60s, 0deg);
        .dot {
          .pointer.seconds {
            //Height, Width, Border-radius, Color
            @include pointer(
              $seconds-height,
              $seconds-width,
              1px,
              $seconds-color
            );
          }
        }
      }

      //Minutes Pointer
      .pointer-container.minutes {
        z-index: 1;
        position: absolute;
        transform: rotateZ(0deg);
        //Name, 1 hour, Pointer Position
        @include animation(animate-minutes, 3600s, 0deg);
        .dot {
          .pointer.minutes {
            @include pointer(
              $minutes-height,
              $minutes-width,
              1.5px,
              $minutes-color
            );
          }
        }
      }

      //Hours Pointer
      .pointer-container.hours {
        z-index: 0;
        position: absolute;
        transform: rotateZ(310deg);
        //Name, 12 hours, Pointer Position
        @include animation(animate-hours, 43200s, 310deg);
        .dot {
          .pointer.hours {
            @include pointer($hours-height, $hours-width, 1.5px, $hours-color);
          }
        }
      }
    }

    .numbers {
      .top::before,
      .middle::before,
      .middle::after,
      .bottom::before {
        display: flex;
        align-items: center;
        justify-content: center;
        height: $label-size;
        width: $label-size;
        border-radius: 50%;
      }
      .top {
        text-align: center;
        &::before {
          content: "12";
          background-color: $red-label;
        }
      }
      .middle {
        &::before {
          content: "9";
        }
        &::after {
          content: "3";
        }
      }
      .bottom {
        &::before {
          content: "6";
        }
      }
    }
  }

  .belt {
    width: $belt-width;
    height: $belt-height;
    border-radius: 10px;
    background-color: $belt;
  }
}