@keyframes clock-hands {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes clock-hands-sticky {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  7% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  8% {
    transform: translate(-50%, -50%) rotate(30deg);
  }
  15% {
    transform: translate(-50%, -50%) rotate(30deg);
  }
  16% {
    transform: translate(-50%, -50%) rotate(60deg);
  }
  24% {
    transform: translate(-50%, -50%) rotate(60deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  32% {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  33% {
    transform: translate(-50%, -50%) rotate(120deg);
  }
  40% {
    transform: translate(-50%, -50%) rotate(120deg);
  }
  41% {
    transform: translate(-50%, -50%) rotate(150deg);
  }
  49% {
    transform: translate(-50%, -50%) rotate(150deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  57% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
  58% {
    transform: translate(-50%, -50%) rotate(210deg);
  }
  65% {
    transform: translate(-50%, -50%) rotate(210deg);
  }
  66% {
    transform: translate(-50%, -50%) rotate(240deg);
  }
  74% {
    transform: translate(-50%, -50%) rotate(240deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(270deg);
  }
  82% {
    transform: translate(-50%, -50%) rotate(270deg);
  }
  83% {
    transform: translate(-50%, -50%) rotate(300deg);
  }
  90% {
    transform: translate(-50%, -50%) rotate(300deg);
  }
  91% {
    transform: translate(-50%, -50%) rotate(330deg);
  }
  99% {
    transform: translate(-50%, -50%) rotate(330deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.c-clock-symbol {
  $c: rgba($colorBodyFg, 0.5);
  $d: 16px;
  height: $d;
  width: $d;
  position: relative;

  &__outer {
    // SVG brackets shape
    width: 100%;
    height: 100%;
    fill: $c;
  }

  // Clock hands
  div[class*='hand'] {
    $handW: 2px;
    $handH: $d * 0.4;
    animation-iteration-count: infinite;
    animation-timing-function: steps(12);
    transform-origin: bottom;
    position: absolute;
    height: $handW;
    width: $handW;
    left: 50%;
    top: 50%;
    z-index: 2;

    &:before {
      background: $c;
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      bottom: -1px;
    }

    &.hand-little {
      z-index: 2;
      animation-duration: 12s;
      transform: translate(-50%, -50%) rotate(120deg);

      &:before {
        height: ceil($handH * 0.6);
      }
    }

    &.hand-big {
      z-index: 1;
      animation-duration: 1s;
      transform: translate(-50%, -50%);

      &:before {
        height: $handH;
      }
    }
  }

  // Modes
  .is-realtime-mode &,
  .is-lad-mode & {
    $c: $colorTimeRealtimeFgSubtle;

    .c-clock-symbol__outer {
      // Brackets icon
      fill: $c;
    }

    div[class*='hand'] {
      animation-name: clock-hands;

      &:before {
        background: $c;
      }
    }
  }
}

// Contexts
.c-so-view--no-frame {
  .c-compact-tc:not(.is-expanded) {
    .c-clock-symbol {
      $c: $frameControlsColorFg;

      &__outer {
        fill: $c;
      }

      div[class*='hand']:before {
        background: $c;
      }
    }
  }
}