@use 'variables' as *;
@use 'mixins' as *;

$zwssgrprogressbar: ".zwssgr";

#{$zwssgrprogressbar} {
    &-progress-bar {
        display: none;
        position: relative;
        margin: 0 0 20px 0;
        width: 100%;
        &.true {
            display: block;
        }
        .progress {
            width: 100%;
            height: 35px;
            background-color: var(--white-color);
            border: none;
            border-radius: var(--border-radius-10);
            &::-webkit-progress-bar {
                background-color: var(--gray-color-500);
                border-radius: var(--border-radius-10);
            }
            &::-webkit-progress-value {
                border-radius: var(--border-radius-10);
            }
            &::-moz-progress-bar {
                border-radius: var(--border-radius-10);
            }
        }
        .progress-percentage {
            position: absolute;
            color: var(--white-color);
            font-size: var(--font-size-h1);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-weight: var(--font-weight-700);
        }
    }
}