/* Ajouter un point */
.ll-steps-extra {
  @apply flex justify-between;
  & button:first-child {
    padding: calc(var(--step-circle-radius) / 2) calc(var(--step-circle-radius) / 2)
      calc(var(--step-circle-radius) / 2) calc(var(--step-circle-radius) * 1.5 + 1rem);
  }

  & .ll-marker {
    transform: translate(calc(var(--step-circle-radius) / 3));
  }
}

.ll-steps {
  @apply relative;

  &[data-marker="circle"] {
    .marker {
      @apply bg-gray-1 shadow-sm;
      width: calc(var(--step-circle-radius) * 2);
      height: calc(var(--step-circle-radius) * 2);

      &.active {
        @apply bg-gray-2;
      }
    }
  }

  &[data-marker="bullet"] {
    .marker {
      @apply text-body-2xs bg-gray-0 outline-gray-2 outline outline-2;
      margin: calc(var(--step-circle-radius) / 2);
      width: calc(var(--step-circle-radius));
      height: calc(var(--step-circle-radius));

      &.active {
        @apply outline-gray-4;
      }
    }
  }
  &[data-direction="horizontal"] {
    @apply flex flex-wrap;
    &[data-marker="circle"] {
      --line-width: calc(100% - var(--step-circle-radius) * 2 - var(--line-space) * 2);
      --line-left: calc(50% + var(--step-circle-radius) + var(--line-space));
    }

    &[data-marker="bullet"] {
      --line-width: calc(100% - var(--step-circle-radius) - var(--line-space) * 2);
      --line-left: calc(50% + var(--step-circle-radius) / 2 + var(--line-space));
    }

    & .ll-step {
      @apply flex flex-1 flex-col text-center;
      .content {
        @apply mt-2;
      }
    }

    &[data-global-line="false"] .ll-step:not(:last-child)::after {
      content: "";
      border-style: none none var(--line-style) none;

      width: var(--line-width);
      margin-top: -2px;
      order: -1;
      position: relative;
      top: calc(var(--step-circle-radius) + 1px);
      left: var(--line-left);
    }

    .marker-container {
      @apply flex items-center justify-center;
    }
  }

  &[data-direction="vertical"] {
    &[data-marker="circle"] {
      --line-top: calc(var(--step-circle-radius) * 2 + var(--line-space));
      --line-bottom: var(--line-space);
    }

    &[data-marker="bullet"] {
      --line-top: calc(var(--step-circle-radius) * 1.5 + var(--line-space));
      --line-bottom: calc(-0.5 * var(--step-circle-radius) + var(--line-space));
    }

    .ll-step {
      @apply relative flex items-start gap-1;
      &:not(:last-child) {
        padding-bottom: 0.5rem;
      }
    }

    &[data-global-line="false"] .ll-step:not(:last-child)::after {
      @apply absolute left-0 w-0;
      content: "";
      top: var(--line-top);
      bottom: var(--line-bottom);
      transform: translateX(calc(var(--step-circle-radius) - 1px));
      border-style: none none none var(--line-style);
    }

    &[data-global-line="true"]::after {
      @apply absolute left-0 z-0 w-0;
      content: "";
      top: var(--line-top);
      bottom: var(--line-top);
      transform: translateX(calc(var(--step-circle-radius) - 1px));
      border-style: none none none var(--line-style);
    }

    .content {
      @apply flex-1;
    }

    .title {
      line-height: 1rem;
    }
  }

  &[data-global-line="true"] {
    &::after {
      @apply border-gray-2 border-2;
    }

    &.status-done::after {
      @apply border-gray-3;
    }
  }
}

.ll-step {
  [data-global-line="false"] &:not(:last-child) {
    &::after {
      @apply border-gray-2 border-2;
    }

    &.status-done::after {
      @apply border-gray-3;
    }
  }

  .handle {
    @apply text-gray-6 cursor-row-resize transition-all;

    &.active {
      &:hover {
        @apply bg-gray-2 text-transparent;
      }
    }
  }

  .ll-autocomplete {
    @apply flex-1;
  }

  .ll-button {
    @apply my-[2px] ml-2;
  }
}