/* stylelint-disable no-descending-specificity */

@use 'styles/mixins' as *;

:host {
  @include flex(center);

  position: relative;

  &.current {
    .outer-circle {
      border-color: var(--color-primary);
    }

    .inner-circle {
      @include rectangle(24px);

      background-color: var(--color-primary);
    }

    .outer-circle,
    .inner-circle {
      transition: all 150ms ease-in-out;
      transition-delay: 300ms; // Run animation only when previous circle becomes green (150ms) & it's line reaches the current circle (150ms)
    }

    .line-progress {
      width: 50%;
      transition-delay: 450ms; // Run animation only when the current circle becomes visually selected
    }
  }

  &.completed {
    .outer-circle {
      border-color: var(--color-primary);
    }

    .inner-circle {
      background-color: var(--color-indication-success);
      transition: all 150ms ease-in-out;
    }

    .line-progress {
      width: 100%;
      background-color: var(--color-indication-success);
      transition-delay: 150ms; // Run animation only when the current circle becomes green
    }
  }
}

.step {
  @include flex(center, null, column);
}

.outer-circle {
  @include flex(center, center);
  @include rectangle(40px);

  position: relative;
  border: 2px solid var(--color-secondary);
  border-radius: 50%;
}

.inner-circle {
  @include flex(center, center);
  @include rectangle(40px);

  position: absolute;
  border-radius: 50%;
  background-color: var(--color-secondary);
}

.checkmark-icon {
  @include rectangle(16px);

  color: var(--color-always-white);
  animation: checkmark-icon-animation 300ms ease-in-out;
}

.step-info {
  position: absolute;
  top: 60px;
}

.line {
  @include rectangle(100%, 3px);

  margin: 0 20px;
  border-radius: 4px;
  background-color: var(--color-secondary);
}

.line-progress {
  @include rectangle(0, 3px);

  border-radius: 4px;
  background-color: var(--color-primary);
  transition: all 150ms ease-in-out;
}

@keyframes checkmark-icon-animation {
  0% {
    display: none;
    opacity: 0;
  }

  50% {
    display: block;
    opacity: 0;
  }

  100% {
    display: block;
    opacity: 1;
  }
}
