/*
  This CSS will automatically handle the displaying of child dx-step-sequence-step components,
  including animations, if they are enabled. There is no other UI for this component.
*/
::slotted(*) {
    position: absolute;
    top: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    width: 100%;
}

.no-animations ::slotted(*) {
    display: none;
}

::slotted(.visible) {
    display: block;
}

::slotted(.active-step) {
    position: relative;
}

::slotted(.animate-left-out) {
    opacity: 0;
    transform: translateX(-100%);
}

::slotted(.animate-in) {
    opacity: 1;
    transform: translateX(0);
}

::slotted(.animate-right-out) {
    opacity: 0;
    transform: translateX(100%);
}

.step-sequence-container {
    overflow: hidden;
    position: relative;
}