.mol-steps {
    @apply bg-white p-8 overflow-x-auto;

    .steps {
        @apply flex flex-row space-x-6;

        li {
            @apply relative block p-2 pr-6 pl-6 min-w-[280px]  border border-green bg-green bg-opacity-20;
            .vector-start {
                @apply absolute right-[-20px] top-0;

                svg {
                    transform: scale(1.05);
                }

                svg path {
                    @apply stroke-current text-green;

                    fill: #ccebe4;
                }
            }

            .vector-end {
                @apply absolute left-[-15px] top-0;

                svg {
                    transform: scale(1.05);
                }

                svg path {
                    @apply stroke-current text-green;

                    fill: #ccebe4;
                }
            }

            &#current {
                @apply border-red bg-red bg-opacity-20;

                strong {
                    @apply text-red;
                }

                svg path {
                    @apply stroke-current text-red;
                    fill: #f9d5d5;
                }
            }

            &#current ~ li {
                @apply border-gray-800 bg-white text-gray-800;

                strong {
                    @apply text-black font-medium;
                }

                svg path {
                    @apply stroke-current text-gray-800;
                    fill: #ffffff;
                }
            }

            strong {
                @apply text-green font-bold;
            }
        }
    }
}