@mixin barSizes($height, $fontSize) {
    height: $height + px;
    font-size: $fontSize + px;
    line-height: $height + px;
}

.root {
    background-color: var(--uui-progress-bar-wrapper);
    font-family: var(--font-regular);
    color: white; // TODO: change to variable

    :global(.bar) {
        background-color: var(--uui-progress-bar-background);
    }

    :global(.topLabel) {
        color: var(--uui-progress-bar-label);
    }

    &.striped :global(.bar) {
        background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
        background-size: 1rem 1rem;
        animation: animate-stripes 1s linear infinite;
    }
}

@keyframes animate-stripes {
    0% { background-position-x: 1rem;}
}

.size-12 {
    @include barSizes(12, 12);
}

.size-18 {
    @include barSizes(18, 14);
}

.size-24 {
    @include barSizes(24, 16);
}
