:host{
    --stepper-selected-color: var(--ion-color-primary);
    --stepper-color: var(--ion-color-light-shade);
}

.step{
    background-color: var(--stepper-color);
    color: var(--ion-color-dark);
}

.selected{
    background-color: var(--stepper-selected-color);
    color: var(--ion-color-light);
}

ion-progress-bar{
    &::part(progress){
        transition: all ease-in-out .3s !important;
    }
}

.wrapper:not(:empty) + .default {
    display: none;
}

.wrapper:empty{
    display: none;
}

.animated{
    animation-name: slidein;
    animation-duration: .3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out 
}

@keyframes slidein {
    from {
        opacity: 0;
        transform: translateX(3rem);
    }


    to {
        opacity: 1;
        transform: translateX();
    }
}