:root {
    --color-light-accent-primary: #ef3124;
    --color-light-neutral-500: #babbc2;
    --color-light-neutral-700: #898991;
    --color-light-neutral-translucent-1300: rgba(3, 3, 6, 0.88);
    --color-light-neutral-translucent-300: rgba(15, 25, 55, 0.1);
    --color-light-status-attention: #fa9313;
    --color-light-status-info: #2288fa;
    --color-light-status-negative: #ff4837;
    --color-light-status-positive: #0cc44d;
    --color-light-transparent-default: rgba(255, 255, 255, 0);
}
:root {
    --border-radius-m: 8px;
    --border-radius-8: var(--border-radius-m);
}
:root {
    --gap-0: 0px;
}
:root {
    --progressbar-positive-color: var(--color-light-status-positive);
    --progressbar-negative-color: var(--color-light-status-negative);
    --progressbar-attention-color: var(--color-light-status-attention);
    --progressbar-link-color: var(--color-light-status-info);
    --progressbar-tertiary-color: var(--color-light-neutral-500);
    --progressbar-secondary-color: var(--color-light-neutral-700);
    --progressbar-primary-color: var(--color-light-neutral-translucent-1300);
    --progressbar-accent-color: var(--color-light-accent-primary);
}
.container {
    background: var(--color-light-neutral-translucent-300);
    display: flex;
    overflow: hidden;
    border-radius: var(--border-radius-8);
    height: 8px;
    position: relative;
}
.hatch {
    position: absolute;
    left: var(--gap-0);
    top: var(--gap-0);
    bottom: var(--gap-0);
    border-radius: inherit;
    width: 100%;
    transition: transform 0.4s ease;
    background: repeating-linear-gradient(
        -45deg,
        var(--color-light-neutral-translucent-300) 6px 10px,
        var(--color-light-transparent-default) 10px 18px
    );
}
.filled {
    position: relative;
    border-radius: inherit;
    width: 100%;
    transition: transform 0.4s ease;
    z-index: 1;
}
.positive {
        background: var(--progressbar-positive-color);
    }
.attention {
        background: var(--progressbar-attention-color);
    }
.negative {
        background: var(--progressbar-negative-color);
    }
.link {
        background: var(--progressbar-link-color);
    }
.tertiary {
        background: var(--progressbar-tertiary-color);
    }
.secondary {
        background: var(--progressbar-secondary-color);
    }
.primary {
        background: var(--progressbar-primary-color);
    }
.accent {
        background: var(--progressbar-accent-color);
    }