.vitamui-spinner {
    &.mat-progress-spinner circle, .mat-spinner circle {
        stroke: var(--vitamui-grey-600);
    }

    &.primary circle {
        stroke: var(--vitamui-primary);
    }

    &.secondary circle {
        stroke: var(--vitamui-primary);
    }

    &.mat-progress-spinner svg {
        width: 50px;
        height: 50px;
    }

    &.x-large {
        width: 200px!important;
        height: 200px!important;

        &.mat-progress-spinner svg {
            width: 200px!important;
            height: 200px!important;
        }

        &.mat-progress-spinner circle, .mat-spinner circle {
            stroke-width: 5%!important;
        }
    }

    &.large {
        width: 100px!important;
        height: 100px!important;

        &.mat-progress-spinner svg {
            width: 100px!important;
            height: 100px!important;
        }

        &.mat-progress-spinner circle, .mat-spinner circle {
            stroke-width: 7%!important;
        }
    }

    &.medium {
        width: 50px!important;
        height: 50px!important;
        
        &.mat-progress-spinner svg {
            width: 50px!important;
            height: 50px!important;
        }
        }

        &.small {
        width: 25px!important;
        height: 25px!important;
        &.mat-progress-spinner svg {
            width: 25px!important;
            height: 25px!important;
        }
    }
}