<commit_before>@import 'color';

$static-circle-diameter: 1.5em;
$dynamic-circle-diameter: 2em;
$circle-color: #E98024;
$disabled-color: #F2F2F2;

@keyframes animate-circle {
    0% { 
        transform: translate(-50%, -50%) scale(0);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1);
    }
    100% { 
        transform: translate(-50%, -50%) scale(0);
    }
}

@keyframes animate-progress {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

#summaryPanel {
    border-radius: 4px;
    border: 1px solid $brand-gray;
    box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.1);
    p {
         margin: 0em;
    }
    #current-trade-status {
        padding-left: 13%;
    }
    .circle-wrapper {
        width: $static-circle-diameter;
        height: $static-circle-diameter;
        display: inline-block;
        .static-circle {
            width: $static-circle-diameter;
            height: $static-circle-diameter;
            border-radius: 100%;
            border: 0.4em solid $disabled-color;
            display: inline-block;
            position: relative;
            background-color: $disabled-color;
        }
    }
    .circle-wrapper.active {
         .static-circle {
            width: $static-circle-diameter;
            height: $static-circle-diameter;
            border-radius: 100%;
            border: 0.4em solid $circle-color;
            display: inline-block;
            position: relative;
            background-color: #FFF;
            z-index: 1;
        }
        .dynamic-circle {
            position: absolute;
            width: $dynamic-circle-diameter;
            height: $dynamic-circle-diameter;
            background-color: $circle-color;
            border-radius: 100%;
            opacity: 0.32;
            animation: animate-circle 0.8s infinite;
            transform: translate(-50%, -50%);
            margin-top: 0.7em;
            margin-left: -0.75em;
            animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
        }
    }
    .circle-wrapper.complete {
         .static-circle {
            width: $static-circle-diameter;
            height: $static-circle-diameter;
            border-radius: 100%;
            border: 0.4em solid $circle-color;
            display: inline-block;
            position: relative;
            background-color: #FFF;
            z-index: 1;
        }
    }
    .line {
        position: relative;
        display: inline-block;
        top: -0.7em;
        width: 15em;
        height: 0.15em;
        background-color: $disabled-color;
    }
    .line.active {
         .progress-bar {
            box-shadow: none;
            height: 100%;
            background-color: $circle-color;
            display: inline-block;
            animation: animate-progress 0.5s 1;
            animation-fill-mode: forwards;
        }   
    }
}

#fileBrowser {
    width: 388px;
    height: 76px;
    margin-left: -194px;
    margin-top: -38px;
}
<commit_msg>Circle line stack in order<commit_after>@import 'color';

$static-circle-diameter: 1.5em;
$dynamic-circle-diameter: 2em;
$circle-color: #E98024;
$disabled-color: #F2F2F2;

@keyframes animate-circle {
    0% { 
        transform: translate(-50%, -50%) scale(0);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1);
    }
    100% { 
        transform: translate(-50%, -50%) scale(0);
    }
}

@keyframes animate-progress {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

#summaryPanel {
    border-radius: 4px;
    border: 1px solid $brand-gray;
    box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.1);
    p {
         margin: 0em;
    }
    #current-trade-status {
        padding-left: 13%;
    }
    .circle-wrapper {
        width: $static-circle-diameter;
        height: $static-circle-diameter;
        display: inline-block;
        .static-circle {
            width: $static-circle-diameter;
            height: $static-circle-diameter;
            border-radius: 100%;
            border: 0.4em solid $disabled-color;
            display: inline-block;
            position: relative;
            background-color: $disabled-color;
        }
    }
    .circle-wrapper.active {
         .static-circle {
            width: $static-circle-diameter;
            height: $static-circle-diameter;
            border-radius: 100%;
            border: 0.4em solid $circle-color;
            display: inline-block;
            position: relative;
            background-color: #FFF;
            z-index: 2;
        }
        .dynamic-circle {
            position: absolute;
            width: $dynamic-circle-diameter;
            height: $dynamic-circle-diameter;
            background-color: $circle-color;
            border-radius: 100%;
            opacity: 0.32;
            animation: animate-circle 0.8s infinite;
            transform: translate(-50%, -50%);
            margin-top: 0.7em;
            margin-left: -0.75em;
            animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
            z-index: 1;
        }
    }
    .circle-wrapper.complete {
         .static-circle {
            width: $static-circle-diameter;
            height: $static-circle-diameter;
            border-radius: 100%;
            border: 0.4em solid $circle-color;
            display: inline-block;
            position: relative;
            background-color: #FFF;
            z-index: 2;
        }
    }
    .line {
        position: relative;
        display: inline-block;
        top: -0.7em;
        width: 15em;
        height: 0.15em;
        background-color: $disabled-color;
    }
    .line.active {
         .progress-bar {
            box-shadow: none;
            height: 100%;
            background-color: $circle-color;
            display: inline-block;
            animation: animate-progress 0.5s 1;
            animation-fill-mode: forwards;
        }   
    }
}

#fileBrowser {
    width: 388px;
    height: 76px;
    margin-left: -194px;
    margin-top: -38px;
}

{'fraction_non_alphanumeric': 0.12730290456431534, 'fraction_numerical': 0.04, 'mean_word_length': 1.5404721753794266, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2189589', 'n_tokens_mistral': 2047, 'n_tokens_neox': 1837, 'n_words': 382}