/* Steps */

.steps-wrap {

    display: flex;
    flex-direction: row;
    justify-content: space-around;

    .step-item {

        --step-opacity: 1;
        --step-font-weight: 300;
        --step-font-size: var(--13px);
        --step-color: var(--theme-graying);
        --step-background-color: var(--hover-light);
        --step-icon-color: var(--theme-graying);
        --step-icon-font-size: var(--15px);

        --step-line-background-color: var(--hover-light);
        --step-line-before-color: var(--step-background-color);
        --step-line-after-color: var(--step-line-background-color);

        &.active {
            --step-background-color: var(--theme-slate-color);
            --step-icon-color: var(--theme-positive-text);
            --step-color: var(--theme-black);
            --step-font-weight: 400;

            &:not(:first-child) {
                --step-line-before-color: var(--theme-positive-color);
            }
        }

        &.complete {
            --step-line-after-color: var(--theme-positive-color);
            --step-background-color: var(--theme-positive-color);
            --step-icon-color: var(--theme-positive-text);
            --step-color: var(--theme-black);
            --step-font-weight: 400;
        }

        &:not(.active):not(.complete):not(.no-opacity) {
            --step-opacity: 0.65;
        }



        font-weight:  var(--step-font-weight);
        font-size: var(--step-font-size);

        & {
            flex: 1 1;
            overflow: hidden;
            position: relative;
            padding: 4px var(--container-padding);
        }

        &, & .step-content {
            display: inline-flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .step-content {
            color: var(--step-color);
        }

        .step-label {
            opacity: var(--step-opacity, 1);
        }

        .step-icon {

            color: var(--step-icon-color);
            background-color: var(--step-background-color);
            font-size: var(--step-icon-font-size);
            position: relative;
            z-index: 35;

            width: 26px;
            height: 26px;
            padding: 0;

            i.icon {
                width: 14px;
                height: 14px;
            }

        }


        &::before,
        &::after {
            content: '';
            display: block;
            position: absolute;
            top: 16px;
            height: 2px;
            width: 100%;
            z-index: 20;
            background-color: var(--step-line-background-color);
        }

        &::before {
            transform: translateX(-50%);
            background: var(--step-line-before-color);
        }

        &::after {
            transform: translateX(50%);
            background: var(--step-line-after-color);
        }

    }


    &.lines-inside .step-item {

        &:first-child::before {
            display: none !important;
        }

        &:last-child::after {
            display: none !important;
        }

    }


}