@import '../qms-banner-base';

.qms-banner-loading-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 16px;
    font-family: "Raleway";
    
    &-text {
        font-size: 16px;
        line-height: 22px;
        font-weight: 600;
    }

    .loading-infor {
        margin-left: auto;
        display: flex;

        ::ng-deep {
            .spinner {
                height: 30px;
                
                &-primary {
                    .mat-progress-spinner circle, .mat-spinner circle {
                        stroke: $qms-banner-primary-text-color;
                    }
                }

                &-warning {
                    .mat-progress-spinner circle, .mat-spinner circle {
                        stroke: $qms-banner-warning-text-color;
                    }
                }

                &-success {
                    .mat-progress-spinner circle, .mat-spinner circle {
                        stroke: $qms-banner-success-text-color;
                    }
                }

                &-error {
                    .mat-progress-spinner circle, .mat-spinner circle {
                        stroke: $qms-banner-error-text-color;
                    }
                }

                &-light {
                    .mat-progress-spinner circle, .mat-spinner circle {
                        stroke: $qms-banner-light-text-color;
                    }
                }

                &-none {
                    .mat-progress-spinner circle, .mat-spinner circle {
                        stroke: $qms-banner-none-text-color;
                    }
                }
            }
        }

        .percent {
            font-size: 22px;
            line-height: 26px;
            font-weight: 500;
            margin-left: 32px;
        }
    }
}