@use '../../assets/styles/colors' as *;
@use '../../assets/styles/fonts' as *;

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

.root {
    background-color: $gray30;
    font-family: $font-sans;
    color: white;

    :global(.bar) {
        background-color: $blue;
    }

    :global(.topLabel) {
        color: $gray90;
    }

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