.horizontal-timeline-icon {
  &__base-icon {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin: 0 4px;
  }

  &__complete-icon {
    fill: var(--wds-color-black-100, var(--wsr-color-D20, #333853));
    margin: 0 4px;
  }

  &__complete-icon--skin-standard {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--wds-color-blue-100, var(--wsr-color-B10, #116dff));
  }

  &__error-icon {
    fill: var(--wds-color-text-destructive, var(--wds-color-red-100, var(--wsr-color-R10, #e62214)));
  }

  &__upcoming-icon {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--wds-color-black-500, var(--wsr-color-D40, #868aa5));
    margin: 0 4px;
  }

  &__upcoming-icon--skin-standard {
    width: 10px;
    height: 10px;
  }

  &__boundary-icon {
    width: 2px;
    height: 12px;
    background-color: var(--wds-color-black-100, var(--wsr-color-D20, #333853));
    margin: 0 4px;
  }

  &__boundary-icon--skin-standard {
    background-color: var(--wds-color-blue-100, var(--wsr-color-B10, #116dff));
  }

  &__active-icon {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    position: relative;
    border: 2px solid var(--wds-color-black-100, var(--wsr-color-D20, #333853));
    margin: 0 4px;
  }

  &__active-icon--skin-standard {
    background-color: var(--wds-color-blue-300, var(--wsr-color-B30, #a8caff));
    border: none;
  }

  &__active-icon::before {
    content: "";
    margin: auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--wds-color-black-100, var(--wsr-color-D20, #333853));
    animation-name: horizontal-timeline-icon-bounce;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
  }

  &__active-icon--skin-standard::before {
    background-color: var(--wds-color-blue-100, var(--wsr-color-B10, #116dff));
    animation-name: none;
    height: 8px;
    width: 8px;
  }
}

@keyframes horizontal-timeline-icon-bounce {
  50% {
    transform: scale(1.66);
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  }

  100% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
  }
}