@st-namespace 'Spinner-st-css';
@st-import [ --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor ] from '../../common/formatters.st';
@st-import [ --wst-paragraph-2-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
/*
 * Spinner path color
 * @default color-5
 * @type color
 */
@property st-global(--wix-ui-tpa-spinner-path-color);

/*
 * Spinner diameter
 * @default 50
 * @type size
 */
@property st-global(--wix-ui-tpa-spinner-diameter);

/*
 * Spinner line width(1-10)
 * @default 4
 * @type size
 */
@property st-global(--wix-ui-tpa-spinner-stroke-width);

.root {
    -st-states: centered, static, slim;

    animation: rotate 2s linear infinite;

    --diameter: var(--wix-ui-tpa-spinner-diameter, 50px);
    width: var(--diameter);
    height: var(--diameter);
    top: auto;
    left: auto;

}

.circle {
    stroke: createColor(--wix-ui-tpa-spinner-path-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
    animation: dash 1.5s ease-in-out infinite;
    stroke-width: clamp(1px, var(--wix-ui-tpa-spinner-stroke-width, 4px), 10px);
}

.root:slim .circle {
    stroke-width: clamp(1px, var(--wix-ui-tpa-spinner-stroke-width, 1px), 10px);
}

.root:centered {
    position: absolute;
    top: calc(50% - var(--diameter) / 2);
    left: calc(50% - var(--diameter) / 2);
}

.root:static,
.root:static .circle {
    animation: none;
}

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

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* st-namespace-reference="../../../../src/components/Spinner/Spinner.st.css" */