@import "../variables";
.fsc-clock{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--section-border-color);
  padding: ($spacer-half*0.5) 0;
  margin-bottom: $spacer-half;
  background-color: var(--section-bg-color);
  color: var(--section-color);

  &.fsc-animate{
    .fsc-animated-clock{
      svg{
        #c_arm_s{
          transform-origin: center;
          animation: 2s linear infinite fsc-clock-spin;
        }
        #c_arm_m{
          transform-origin: center;
          animation: 6s linear infinite fsc-clock-spin;
        }
      }
    }
  }

  .fsc-animated-clock{
    margin-right: $spacer-half;

    svg{
      width: 1.875rem;
      height: 1.875rem;
      path{
        fill: var(--clock-stopped-color);
        stroke: var(--clock-stopped-color);
      }
    }
  }
  &.started{
    .fsc-animated-clock{
      svg{
        path{
          fill: var(--clock-started-color);
          stroke: var(--clock-started-color);
        }
      }
    }
  }
  &.paused{
    .fsc-animated-clock{
      svg{
        path{
          fill: var(--clock-paused-color);
          stroke: var(--clock-paused-color);
        }
      }
    }
  }

  .fsc-current-time{
    font-size: 1.25rem;
  }
}

@keyframes fsc-clock-spin
{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}