@st-namespace 'Spinner-deprecated-st-css';
:import {
    -st-from: "../../common/formatters.st";
    -st-named: color, fallback, calculate;
}

/*Defaults*/
:vars {
    DefaultPathColor: color(color-5);
    DefaultDiameter: 50px;
}

/*Overrides*/
:vars {
    /*
      @default color-5
    */
    PathColor: --overridable;

    /*
      @default 50px
    */
    Diameter: --overridable;
}

/*
 * @default color-5
 * @type color
 */
@property st-global(--wix-ui-tpa-spinner-path-color);

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

:vars {
    UsedPathColor: color(fallback(value(PathColor), value(DefaultPathColor)));
    UsedDiameter: fallback(value(Diameter), value(DefaultDiameter));
    UsedTopLeft: calculate("-", 50%, calculate("/", value(UsedDiameter), 2));
}

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

    animation: rotate 2s linear infinite;
    width: value(UsedDiameter);
    height: value(UsedDiameter);
    top: auto;
    left: auto;
}

.circle {
    stroke: value(UsedPathColor);
    animation: dash 1.5s ease-in-out infinite;
}

.root:centered {
    position: absolute;
    top: value(UsedTopLeft);
    left: value(UsedTopLeft);
}

.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.deprecated.st.css" */