ol.lttrshop-checkout-steps {
    display: flex;
    padding: 0;
    white-space: nowrap;
    flex-direction: row;
    flex-wrap: wrap;
}

ol.lttrshop-checkout-steps li {
    color: var(--lttrshop-text-color);
    font-size: var(--lttrshop-txt-s);
    line-height: var(--lttrshop-line-s);
    position: relative;
    list-style-position: inside;
    padding-left: var(--lttrshop-space-xs);
}

ol.lttrshop-checkout-steps li::marker {
    content: "" counter(list-item) "  ";
    font-size: var(--lttrshop-txt-s);
    line-height: var(--lttrshop-line-s);
    white-space: pre;
}

ol.lttrshop-checkout-steps li:after {
    font-family: var(--lttrshop-font-family-icons);
    font-weight: var(--lttrshop-font-weight-icons);
    color: var(--lttrshop-text-color);
    opacity: 0.3;
    content: "▸";
    display: inline-block;
    padding: 0 0 0 var(--lttrshop-space-xs);

    vertical-align: middle;
    font-size: var(--lttrshop-txt-icon);
    line-height: var(--lttrshop-line-s);
}

ol.lttrshop-checkout-steps li:nth-last-child(2):not(.-previous):after,
ol.lttrshop-checkout-steps li:last-child:after {
    content: '';
    padding: 0;
}

ol.lttrshop-checkout-steps .-current {
    color: var(--lttrshop-highlight-color);
    font-family: var(--lttrshop-font-family-bold);
    font-weight: var(--lttrshop-font-weight-bold);
}

ol.lttrshop-checkout-steps .-current.-enjoy {
    display: list-item;
    color: var(--lttrshop-highlight-color);
    font-family: var(--lttrshop-font-family-bold);
    font-weight: var(--lttrshop-font-weight-bold);
    list-style: none;
}

ol.lttrshop-checkout-steps .-current.-enjoy::marker {
    content: "";
}

ol.lttrshop-checkout-steps .-previous {
    color: var(--lttrshop-half-text-color);
}

ol.lttrshop-checkout-steps .-previous a {
    color: var(--lttrshop-half-text-color);
    font-size: var(--lttrshop-txt-s);
    line-height: var(--lttrshop-line-s);
}

ol.lttrshop-checkout-steps .-previous a:hover {
    opacity: var(--gamma);
    text-decoration: underline;
}

ol.lttrshop-checkout-steps .-enjoy {
    display: none;
}

@media screen and (max-width: 599px) {
    ol.lttrshop-checkout-steps li:nth-last-child(2) {
        margin-right: var(--lttrshop-space-l);
    }

    ol.lttrshop-checkout-steps li:not(.current) {
        /* hiding ordered list item's content while keeping the marker https://stackoverflow.com/questions/69553645/how-to-hide-ordered-list-items-content-while-keeping-the-marker-via-css */
        font-size: 0;
    }

    ol.lttrshop-checkout-steps li {
        padding-left: 0;
    }
}

@media screen and (min-width: 600px) and (max-width: 900px) {
    ol.lttrshop-checkout-steps li:after:not(ol.lttrshop-checkout-steps li.-current:after) {
        margin-left: 0;
    }

    ol.lttrshop-checkout-steps li:nth-last-child(2) {
        margin-right: var(--lttrshop-space-l);
    }

    ol.lttrshop-checkout-steps li {
        padding-left: 0;
    }
}

@media screen and (max-width: 1100px) {
    ol.lttrshop-checkout-steps
    {
        /* hiding the steps completely as 
            ::after is not vertically consistent with markers 
            if content's font-size is 0 */
        display: none;
    }

    ol.lttrshop-checkout-steps li:not(.-current),
    ol.lttrshop-checkout-steps li.-previous a {
        /* hiding ordered list item's content while keeping the marker https://stackoverflow.com/questions/69553645/how-to-hide-ordered-list-items-content-while-keeping-the-marker-via-css */
        font-size: 0;
    }

    ol.lttrshop-checkout-steps li:not(.-current):after {
        margin-left: 0;
    }

    ol.lttrshop-checkout-steps li.-current.-enjoy {
        padding-left: 0;
    }
}