:root {
    --bcpb-color-base: #f4f6f8;
    --bcpb-color-white: #fff;
    --bcpb-color-black: #333;
    --bcpb-color-gray: #75787b;
    --bcpb-color-gray-light: #bbb;
    --bcpb-color-gray-disabled: #e8e8e8;
    --bcpb-color-green: #53a318;
    --bcpb-color-green-light: #a2c48d;
    --bcpb-color-green-dark: #383;
    --bcpb-milestone-size: 25px;
    --bcpb-milestone-position: calc(var(--bcpb-milestone-size) / 2);
    --bcpb-milestone-title-padding: calc(var(--bcpb-milestone-size) / 1.2);
}

.bcpb-bluecart {
    isolation: isolate;

    .progress-bar-2 span,
    .progress-bar span {
        white-space: initial;
    }

    .progress-bar {
        display: flex;
        justify-content: space-between;
        list-style: none;
        padding: 0;
        align-items: flex-end;
        float: unset;
        width: unset;
        font-size: unset;
        text-align: unset;
        margin: 0 0 8px 0;
        background: transparent;
        overflow: visible;
        position: unset;
    }

    .progress-bar-2 {
        display: flex;
        justify-content: space-between;
        list-style: none;
        padding: 0;
        align-items: flex-start;
    }

    .progress-bar-2 {
        margin: 0;
    }

    .progress-bar-2 li {
        flex: 2;
        position: relative;
        white-space: nowrap;
        overflow: visible;
        min-width: 0;
        margin-top: calc(var(--bcpb-milestone-position) - (var(--bcpb-milestone-position) / 1.5));
    }

    .progress-bar-2 li.hide-milestone {
        margin-top: 0px;
    }

    .progress-bar li {
        flex: 2;
        position: relative;
        padding: 0;
        padding-bottom: var(--bcpb-milestone-title-padding);
        white-space: nowrap;
        overflow: visible;
        min-width: 0;
    }

    .progress-bar li.hide-milestone {
        padding-bottom: 15px;
    }

    .progress-bar-2 li,
    .progress-bar li {
        text-align: center;
        white-space: normal;
        margin-bottom: 0px;
    }

    /* milestone */
    .progress-bar li:before {
        content: "";
        display: block;
        width: var(--bcpb-milestone-size);
        height: var(--bcpb-milestone-size);
        background-color: var(--bcpb-color-gray-disabled);
        border-radius: 50%;
        border: 2px solid var(--bcpb-color-white);
        position: absolute;
        left: calc(50% - var(--bcpb-milestone-position));
        bottom: calc(var(--bcpb-milestone-position) - (var(--bcpb-milestone-position)*2));
        z-index: 3;
        transition: all .2s ease-in-out;
    }

    /** fixes lafliod theme css conflict */
    .progress-bar:before {
        width: initial;
    }

    /* Hide milestone  */
    .progress-bar li.hide-milestone:before {
        display: none;
    }

    /* Checkbox in milestone */
    .progress-bar .is-complete:before {
        border-color: var(--bcpb-color-green);
        background: url('data:image/svg+xml,<svg fill="none" stroke="currentColor" stroke-width="3" style="color:white;" viewBox="-2 -3 30 30" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path></svg>');
        background-color: var(--bcpb-color-green);
    }

    .progress-bar-2 span,
    .progress-bar span {
        transition: opacity .3s ease-in-out;
    }

    .progress-bar .is-complete:after,
    .progress-bar .is-active:after {
        content: "";
        display: block;
        width: 100%;
        position: absolute;
        bottom: -4px;
        left: -50%;
        z-index: 2;
        height: 8px;
        background-color: var(--bcpb-color-base);
    }

    /**
    * The border radius of the progress bar is 4px. ON the first, the right border-radius is 0px. On the last, the left border-radius is 0px.
    */
    .progress-bar li:first-child:after,
    .progress-bar li:first-child:after {
        border-radius: 4px 0 0 4px;
    }

    .progress-bar li:last-child:after,
    .progress-bar li:last-child:after {
        border-radius: 0 4px 4px 0;
    }

    /**
     * Since hide-milestone only has 1 milestone, we need to make sure the border-radius is 4px.
     */
    .progress-bar li.hide-milestone:after {
        border-radius: 4px;
    }

    .progress-bar .is-complete:after,
    .progress-bar .is-active:after {
        width: 100%;
        left: 0;
    }

    .progress-bar .is-active:before {
        background-color: var(--bcpb-color-white);
        border-color: var(--bcpb-color-green);
    }

    .progress-bar-progress {
        position: relative;
        z-index: 2;
        width: 0%;
        transition: width 0.4s ease-in-out;
        background-color: var(--bcpb-color-green);
        height: 8px;
        top: -12px;
        border-radius: 4px;
    }

    .checklist-container .spacer {
        height: 0px;
    }

    .checklist ol {
        list-style-type: none;
        padding-left: 0;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        padding-bottom: 0px !important;
        margin-inline-start: initial;
    }

    .checklist ol li {
        position: relative;
        padding-left: 35px;
        white-space: normal;
        display: flex;
        flex-direction: column;
        min-height: var(--milestone-size);
        justify-content: center;
    }

    .checklist ol li+li {
        margin-top: 10px;
    }

    .checklist ol li::before {
        content: "";
        display: block;
        width: var(--bcpb-milestone-size);
        height: var(--bcpb-milestone-size);
        background-color: var(--bcpb-color-gray-disabled);
        border-radius: 50%;
        border: 2px solid var(--bcpb-color-white);
        position: absolute;
        bottom: calc(var(--bcpb-milestone-position) - (var(--bcpb-milestone-position)*2));
        transition: all .2s ease-in-out;
        margin-left: -35px;
        top: 50%;
        transform: translateY(-50%);
    }

    .checklist .is-complete::before {
        border-color: var(--bcpb-color-green);
        background: url('data:image/svg+xml,<svg fill="none" stroke="currentColor" stroke-width="3" style="color:white;" viewBox="-2 -3 30 30" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"></path></svg>');
        background-color: var(--bcpb-color-green);
    }

    .checklist ol li.in-progress::before {
        content: "";
    }

    .striped {
        background: linear-gradient(45deg, #f4f6f8 25%, transparent 25%, transparent 75%, #f4f6f8 75%, #f4f6f8 100%);
        background-size: 40px !important;
        animation: bcpbStripedMove 0.5s linear infinite;
        height: 8px;
    }
}

@keyframes bcpbStripedMove {
    100% {
        background-position: 40px 0;
    }
}