.lbaic-settings-steps {
  --lbaic-settings-steps-border: var(--lbaic-settings-circle-button-border);
  --lbaic-settings-steps-bg: var(--lbaic-settings-circle-button-after-border);
  --lbaic-settings-steps-color: var(--lbaic-settings-circle-button-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-grow: 1;

  .lbaic-settings-step {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--lbaic-settings-steps-border);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--lbaic-settings-circle-button-bg);
    transition: all 300ms ease-in-out;

    &.active, &.done {
      cursor: pointer;
    }

    &-label {
      font-size: var(--lbaic-settings-fs-14);
      font-weight: var(--lbaic-settings-fw-500);
      color: var(--lbaic-settings-steps-color);
    }

    &.active {
      --lbaic-settings-steps-border: var(--lbaic-settings-circle-button-border-active);
      --lbaic-settings-steps-bg: var(--lbaic-settings-circle-button-after-border-active);
      --lbaic-settings-steps-color: #828282;
    }

    &.done {
      --lbaic-settings-circle-button-bg: var(--lbaic-settings-radio-modern-active-bg);
      --lbaic-settings-steps-border: transparent;
      --lbaic-settings-steps-bg: var(--lbaic-settings-circle-button-after-border-active);
      --lbaic-settings-steps-color: var(--lbaic-settings-button-primary-bg);

    }

    &:not(:first-child)::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 1px;
      background: var(--lbaic-settings-steps-bg);
      right: 102%;
      top: 50%;
      transform: translateY(-50%);
      transition: background-color 300ms ease-in-out;
      cursor: auto;
    }
  }

  .lbaic-settings-step {
    position: relative;
  }
}
