@import 'constants';

@mixin progress-base {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $color-dark;
    color: #fff;

    &.striped {
        background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
        background-size: $progress-height-default $progress-height-default;
    }

    &.outlined {
        color: $color-dark;
        border-style: solid;
        border-width: 2px;
        border-color: $color-dark;
        background-color: $color-white;
    }
}

@mixin progress-colors {
    @each $colorName, $color in $color-list {
        &.#{$colorName} {
            background-color: $color;
            border: 1px solid $color;
            
            &.outlined {
                color: $color;
                border-style: solid;
                border-width: 2px;
                border-color: $color;
                background-color: $color-white;
            }
        }
    }
}