/*Override ring-loader scale*/
:root,
:host {
    --ring-loader-inline-scale: 2!important;
}



:root,
:host {
    /* stylelint-disable-next-line color-no-hex */
    --ring-loader-inline-stops: #ff00eb, #bd3bff, #008eff, #58ba00, #f48700, #ff00eb;
    --ring-loader-inline-scale: 1;
}

:global(.ring-ui-theme-dark) {
    /* stylelint-disable-next-line color-no-hex */
    --ring-loader-inline-stops: #ff2eef, #d178ff, #289fff, #88d444, #ffe000, #ff2eef;
}

@keyframes spin {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(calc(17 / 12));
    }
}
.loader,
.ring-loader-inline {
    /* needed for better backward-compatibility */

    position: relative;

    display: inline-block;

    overflow: hidden;

    transform: rotate(0);
    animation: spin 1s linear infinite;
    vertical-align: -3px;

    border-radius: calc(var(--ring-unit)*var(--ring-loader-inline-scale));

    &,
    &::after {
        transform-origin: 50% 50%;
    }

    &::after {
        display: block;

        width: calc(calc(var(--ring-unit)*var(--ring-loader-inline-scale)) * 2);
        height: calc(calc(var(--ring-unit)*var(--ring-loader-inline-scale)) * 2);

        content: '';
        animation: pulse 0.85s cubic-bezier(0.68, 0, 0.74, 0.74) infinite alternate;

        background-image: conic-gradient(var(--ring-loader-inline-stops));
        mask-image: radial-gradient(calc(var(--ring-unit)*var(--ring-loader-inline-scale)), transparent 71.875%, var(--ring-content-background-color) 71.875%);
    }
}

.children {
    margin-left: calc(calc(var(--ring-unit)*var(--ring-loader-inline-scale)) / 2);
}