@import '../../../styleConstants.scss';

#cart-steps-container {
    padding: 1rem 1rem 2rem;
    text-align: center;

    .step-name {
        cursor: default;
        padding: 1rem;
        display: inline-block;
        border-radius: 4px;
        color: $whiteColor;
    }

    .steps-link {
        display: inline;
        width: 2rem;
        height: 0.15rem;
        position: unset;
    }

    .step-link {
        display: inline-block;
        background: $borderColor;
        height: 0.15rem;
        width: 2rem;
    }

    .active {
        background: $lightGreenColor;
    }

    .inactive {
        background: $lightGreyColor;
    }

    .completed {
        background: $blueColor;
    }

    .progress-main-bar {
        background: none;
        height: 1.5rem;
        font-size: $font-size-small;
    }

    .progress-bar-item {
        border-radius: 0 15px 15px 0;
        overflow: hidden;
        margin-right: 0.5rem;
        height: 100%;
    }

    .next-btn,
    .prev-btn {
        cursor: pointer;
        background-color: $whiteColor;
        color: $darkGreyColor;
        border: 0.1rem $border-grey solid;
        padding: 0.95rem;
        display: inline-block;
        border-radius: $box-radius;
        font-weight: $font-weight;
    }

    .next-btn {
        margin-left: 2rem;
    }

    .prev-btn {
        margin-right: 2rem;
    }
}

#cart-items-container {
    padding-top: 1rem;
}
@media all and (max-width: 1494px) {
    #cart-steps-container {
        .steps-link {
            position: relative;
            height: 1.5rem;
            display: block;
            width: 2rem;
            height: 1.5rem;
            top: 0;
            left: 49%;
        }

        .step-link {
            background: $borderColor;
            width: 3px;
            height: 1.5rem;
            z-index: 0;
        }

        .next-btn {
            display: block;
            width: fit-content;
            margin-top: 1rem;
            margin-left: 45%;
        }

        .prev-btn {
            display: block;
            width: fit-content;
            margin-bottom: 1rem;
            margin-left: 44%;
        }
    }
}
@media all and (min-width: 992px) and (max-width: 1200px) {
    #cart-steps-container {
        .step-name {
            width: 30%;
        }

        .steps-link {
            position: relative;
            height: 1.5rem;
            display: block;
            width: 2rem;
            height: 1.5rem;
            top: 0;
            left: 49%;
        }

        .step-link {
            background: $borderColor;
            width: 3px;
            height: 1.5rem;
            z-index: 0;
        }
    }
}
@media all and (max-width: 992px) {
    #cart-steps-container {
        .next-btn {
            display: block;
            margin-top: 1rem;
            margin-left: 0;
            width: 100%;
        }

        .prev-btn {
            display: block;
            margin-bottom: 1rem;
            margin-left: 0;
            width: 100%;
        }
    }

    #cart-customer-details-container,
    #cart-review-all-order-container,
    #cart-upload-documents-container {
        border-top: 0.2rem solid $borderColor;
    }
}
@media all and (max-width: 768px) {
    #cart-steps-container {
        .step-name {
            display: block;
        }
    }
}
