@layer components {
    .rtds-steps {
        --_steps-color-default:   var(--steps-color-default,   var(--color-content-03,         var(--color-neutral-900)));
        --_steps-color-active:    var(--steps-color-active,    var(--color-content-secondary,  var(--color-secondary-500)));
        --_steps-color-completed: var(--steps-color-completed, var(--color-content-secondary,  var(--color-secondary-500)));
        --_steps-label-color:     var(--steps-label-color,     var(--color-content-01,         var(--color-neutral-900)));
        --_steps-indicator-size:  var(--steps-indicator-size,  var(--spacing-6,                1.5rem));
        --_steps-indicator-bg:    var(--steps-indicator-bg,    var(--color-background-01,      var(--color-neutral-50)));
        --_steps-indicator-border: var(--steps-indicator-border, var(--color-border-gray-03,    var(--color-neutral-600)));
        --_steps-bar-color:        var(--steps-bar-color,       var(--color-border-gray-03,    var(--color-neutral-600)));
        --_steps-bar-height:       var(--steps-bar-height,      var(--spacing-1,               0.25rem));
        display: flex;
        align-items: center;
        gap: var(--spacing-2);
    }

    .rtds-steps__list {
        flex: 1;
        min-width: 0;
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .rtds-steps__item {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    /* Nasconde visualmente gli step non attivi su mobile, lasciandoli accessibili agli screen reader */
    :where(.rtds-steps__item):not(.rtds-steps__item--active) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .rtds-steps__link {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--spacing-2);
        text-decoration: none;
        color: var(--_steps-color-default);
        font-size: var(--fontsize-text-sm);
        padding-block: var(--spacing-3);
        padding-inline: var(--spacing-2);
    }

    :where(a.rtds-steps__link):hover .rtds-steps__label {
        text-decoration: underline;
    }

    /* Indicatore: nascosto su mobile */
    .rtds-steps__indicator {
        display: none;
        width: var(--_steps-indicator-size);
        height: var(--_steps-indicator-size);
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        flex-shrink: 0;
        line-height: 1;
        color: var(--_steps-color-default);
        background-color: transparent;
        border: 2px solid var(--_steps-indicator-border);
    }

    /* Completato: cerchio con bordo + sfondo bianco + check icon */
    :where(.rtds-steps__item--completed) .rtds-steps__indicator {
        color: var(--_steps-color-completed);
        border-color: currentColor;
        background-color: var(--_steps-indicator-bg);
    }

    /* Attivo: cerchio con bordo spesso + sfondo bianco */
    :where(.rtds-steps__item--active) .rtds-steps__indicator {
        color: var(--_steps-color-active);
        background-color: var(--_steps-indicator-bg);
        border-color: var(--_steps-color-active);
        border-width: var(--spacing-2);
    }

    .rtds-steps__label {
        color: inherit;
    }

    :where(.rtds-steps__item--completed) .rtds-steps__label {
        color: var(--_steps-label-color);
    }

    :where(.rtds-steps__item--active) .rtds-steps__label {
        font-weight: 600;
        color: var(--_steps-color-active);
    }

    /* Counter: visibile su mobile affiancato allo step attivo */
    .rtds-steps__counter {
        display: block;
        flex-shrink: 0;
        font-size: var(--fontsize-text-sm);
        font-weight: 700;
        color: var(--_steps-color-default);
    }

    @media (min-width: 40rem) {
        .rtds-steps {
            display: block;
        }

        .rtds-steps__list {
            gap: var(--spacing-base);
        }

        /* Ripristina la visibilità di tutti gli step su desktop */
        :where(.rtds-steps__item):not(.rtds-steps__item--active) {
            position: static;
            width: auto;
            height: auto;
            overflow: visible;
            clip-path: none;
            white-space: normal;
        }

        .rtds-steps__item {
            border-bottom: var(--_steps-bar-height) solid var(--_steps-bar-color);
        }

        .rtds-steps__item--completed {
            border-bottom-color: var(--_steps-color-completed);
        }

        .rtds-steps__item--active {
            border-bottom-color: var(--_steps-color-active);
        }

        /* Indicatore: visibile su desktop */
        .rtds-steps__indicator {
            display: flex;
        }

        .rtds-steps__counter {
            display: none;
        }
    }

    /* Variante numerata */
    :where(.rtds-steps--numbered) .rtds-steps__indicator {
        font-size: var(--fontsize-text-sm);
        font-weight: 600;
    }

    /* Attivo numerata: cerchio pieno + numero bianco */
    :where(.rtds-steps--numbered .rtds-steps__item--active) .rtds-steps__indicator {
        background-color: var(--_steps-color-active);
        border-color: var(--_steps-color-active);
        color: var(--color-content-inverse, var(--color-neutral-50));
    }

    /* Completato numerata: cerchio con bordo + sfondo bianco + check icon */
    :where(.rtds-steps--numbered .rtds-steps__item--completed) .rtds-steps__indicator {
        color: var(--_steps-color-completed);
        border-color: currentColor;
        background-color: var(--_steps-indicator-bg);
    }
}