@import '../../progress-bar/src/vars.css';

.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;
}

@each $background in positive, attention, negative, link, tertiary, secondary, primary, accent {
    .$(background) {
        background: var(--progressbar-$(background)-color);
    }
}