: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);
    }