gsap-carousel/src/widgets/TimeFrameSlider/ui/CircleTimeline/CircleTimeline.module.scss

.circleContainer {
  position: absolute;
  top: 50%;
  left: 50%;

  width: calc(var(--circle-radius, 265px) * 2);
  height: calc(var(--circle-radius, 265px) * 2);

  border: 1px solid rgba(#42567A, 0.2);
  border-radius: 50%;

  transform: translate(-50%, -50%);
}

.point {
  position: absolute;

  width: 56px;
  height: 56px;
  margin-top: -28px;
  margin-left: -28px;

  border: 25px solid transparent;
  border-radius: 50%;

  background: var(--color-text);
  background-clip: content-box;

  cursor: pointer;

  transform-origin: center;

  transition: all 0.3s ease;

  &:hover,
  &.active {
    z-index: 10;

    display: flex;
    justify-content: center;
    align-items: center;

    border: 1px solid rgba(#303E58, 0.5);

    background: #F4F5F9;
    background-clip: padding-box;
  }

  &:hover .number,
  &.active .number {
    display: block;
  }

  .number {
    display: none;

    color: var(--color-text);
    font-size: 20px;
  }

  .title {
    position: absolute;
    left: 100%;

    margin-left: 20px;

    color: var(--color-text);
    font-weight: 700;
    font-size: 20px;
    white-space: nowrap;

    visibility: hidden;

    opacity: 0;
  }
}