@use '~flux/components/css/mixin';

.progressBar {
    --progress-fill: var(--primary-600);
    --progress-fill-soft: var(--primary-500);

    position: relative;
}

.progressBarGray {
    --progress-fill: var(--gray-500);
    --progress-fill-soft: var(--gray-400);
}

.progressBarPrimary {
    --progress-fill: var(--primary-600);
    --progress-fill-soft: var(--primary-500);
}

.progressBarDanger {
    --progress-fill: var(--danger-600);
    --progress-fill-soft: var(--danger-500);
}

.progressBarInfo {
    --progress-fill: var(--info-600);
    --progress-fill-soft: var(--info-500);
}

.progressBarSuccess {
    --progress-fill: var(--success-600);
    --progress-fill-soft: var(--success-500);
}

.progressBarWarning {
    --progress-fill: var(--warning-600);
    --progress-fill-soft: var(--warning-500);
}

.progressBarTrack {
    position: relative;
    height: 9px;
    background: var(--gray-50);
    border-radius: var(--radius-half);
    box-shadow: inset 0 0 0 1px var(--gray-200);
    contain: paint;
}

.progressBarValue {
    position: absolute;
    top: 0;
    left: 0;
    height: inherit;
    border-radius: inherit;
}

.progressBarValueComplete {
    composes: progressBarValue;

    background: var(--progress-fill);
}

.progressBarValueIncomplete {
    composes: progressBarValue;

    background: var(--progress-fill) linear-gradient(-45deg, transparent 20%, rgb(from var(--progress-fill-soft) r g b / .5), transparent 80%);
    background-size: 150px 100%;
    animation: progressBarValue 1s linear infinite;
}

.progressBarTrackIndeterminate {
    composes: progressBarTrack;

    .progressBarValue {
        background: var(--progress-fill) linear-gradient(-45deg, transparent 20%, rgb(from var(--progress-fill-soft) r g b / .5), transparent 80%);
        background-size: 90px 100%;
        animation: progressBarIndeterminate 1s linear infinite;
    }
}

.progressBarStatusRow {
    @include mixin.text(small);

    display: flex;
    gap: 21px;
    justify-content: flex-end;
}

.progressBarProgress {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.progressBarStatus {
    margin-right: auto;
    color: var(--foreground-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.basePaneStructure > .progressBar:first-child {
    margin: 9px 9px 0;
}

.basePaneStructure > .progressBar:last-child {
    margin: 0 9px 9px;
}

.tableCell > .progressBar {
    width: 100%;
}

@keyframes progressBarIndeterminate {
    from {
        background-position-x: 90px;
    }

    to {
        background-position-x: -90px;
    }
}

@keyframes progressBarValue {
    from {
        background-position-x: -150px;
    }

    to {
        background-position-x: 150px;
    }
}