@charset "utf-8";
@import (optional, reference) "var.less";
/*Result component*/
AX-RESULT {
    --_result-w: 5.4rem;
    --_result-ani: _draw-waiting;
    --_result-c-bg: var(--_c-text-sd);
    --_result-c-icon: var(--_c-info);
    display: inline-flex;
    vertical-align: middle;
    [rep=wrap] {
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
    [rep=icon] {
        color: var(--_result-c-icon);
        height: var(--_result-w);
        aspect-ratio: 1/1;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }
    [rep=label] {
    }
    svg {
        width: inherit;
        height: inherit;
        ._out,
        ._in-1:where(:not(._circle)),
        ._in-2:where(:not(._circle)),
        ._bg {
            stroke-width: 3.7253;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        ._line {
            fill: none;
        }
        ._circle {
            opacity: 0;
        }
    }
    &:where(:not([to])) {
        [rep=icon] ._bg {
            stroke: var(--_result-c-bg);
            animation: var(--_result-ani) 1.5s linear infinite;
        }
        &:where([bg="succ"]) {
            --_result-c-bg: var(--_c-succ);
        }
        &:where([bg="error"]) {
            --_result-c-bg: var(--_c-error);
        }
        &:where([bg="info"]) {
            --_result-c-bg: var(--_c-info);
        }
        &:where([bg="warn"]) {
            --_result-c-bg: var(--_c-warn);
        }
        &:where([bg="issue"]) {
            --_result-c-bg: var(--_c-issue);
        }
    }
    &:where([to]) [rep=icon] ._out {
        animation: var(--_result-ani) 1.5s linear infinite;
    }
    &:where([to="warn"]) [rep=icon] ._out {
        --_result-ani: _draw-waiting2;
    }
    &[to="succ"] [rep=icon]{
        ._out {
            stroke: var(--_c-succ);
            stroke-dasharray: 227 229;
            stroke-dashoffset: 228;
            transform-origin: 50% 50%;
            transform: rotate(-90deg);
            animation: _draw-rotate 800ms ease-out 0ms forwards;
        }
        ._in-1 {
            stroke: var(--_c-succ);
            stroke-dasharray: 49 51;
            stroke-dashoffset: 50;
            animation: _draw-line 400ms ease-out 800ms forwards;
        }
        ._bg {
            stroke: var(--_c-succ-bg);
        }
    }
    &[to="error"] [rep=icon]{
        ._out {
            stroke: var(--_c-error);
            stroke-dasharray: 227 229;
            stroke-dashoffset: 228;
            transform-origin: 50% 50%;
            transform: rotate(-90deg);
            animation: _draw-rotate 800ms ease-out 0ms forwards;
        }
        ._bg {
            stroke: var(--_c-error-bg);
        }
        ._in-1,
        ._in-2 {
            stroke: var(--_c-error);
            stroke-dasharray: 42 44;
            stroke-dashoffset: -43;
        }
        ._in-1 {
            animation: _draw-line 400ms ease-out 800ms forwards;
        }
        ._in-2 {
            animation: _draw-line 400ms ease-out 1200ms forwards;
        }
    }
    &[to="info"] [rep=icon]{
        ._out {
            stroke: var(--_c-info);
            stroke-dasharray: 227 229;
            stroke-dashoffset: 228;
            transform-origin: 50% 50%;
            transform: rotate(-90deg);
            animation: _draw-rotate 800ms ease-out 0ms forwards;
        }
        ._in-1 {
            stroke: var(--_c-info);
            stroke-dasharray: 35 37;
            stroke-dashoffset: -36;
            animation: _draw-line 400ms ease-out 1200ms forwards;
        }
        ._in-2 {
            transform-origin: 4.33492rem 2.35856rem;
            animation: _draw-circle 400ms ease-out 800ms forwards;
        }
        ._bg {
            stroke: var(--_c-info-bg);
        }
        ._circle {
            fill: var(--_c-info)
        }
    }
    &[to="warn"] [rep=icon]{
        ._out {
            stroke: var(--_c-warn);
            stroke-dasharray: 248 250;
            stroke-dashoffset: 249;
            animation: _draw-line 800ms ease-out 0ms forwards;
        }
        ._in-1 {
            stroke: var(--_c-warn);
            stroke-dasharray: 30 32;
            stroke-dashoffset: 31;
            animation: _draw-line 400ms ease-out 800ms forwards;
        }
        ._in-2 {
            transform-origin: 4.33492rem 6.43337rem;
            animation: _draw-circle 400ms ease-out 1200ms forwards;
        }
        ._bg {
            stroke: var(--_c-warn-bg);
        }
        ._circle {
            fill: var(--_c-warn);
        }
    }
    &[to="issue"] [rep=icon]{
        ._out {
            stroke: var(--_c-issue);
            stroke-dasharray: 227 229;
            stroke-dashoffset: 228;
            transform-origin: 50% 50%;
            transform: rotate(-90deg);
            animation: _draw-rotate 800ms ease-out 0ms forwards;
        }
        ._in-1 {
            stroke: var(--_c-issue);
            stroke-dasharray: 59 61;
            stroke-dashoffset: 60;
            animation: _draw-line 400ms ease-out 800ms forwards;
        }
        ._in-2 {
            transform-origin: 4.46612rem 6.05502rem;
            animation: _draw-circle 400ms ease-out 1200ms forwards;
        }
        ._bg {
            stroke: var(--_c-issue-bg);
        }
        ._circle {
            fill: var(--_c-issue)
        }
    }
    &[type="font"] {
        [rep=icon] {
            font-size: var(--_result-w);
        }
        &[to="succ"] {
            --_result-c-icon:var(--_c-succ);
        }
        &[to="error"] {
            --_result-c-icon:var(--_c-error);
        }
        &[to="info"] {
            --_result-c-icon:var(--_c-info);
        }
        &[to="warn"] {
            --_result-c-icon:var(--_c-warn);
        }
        &[to="issue"] {
            --_result-c-icon:var(--_c-issue);
        }
    }
}
@keyframes _draw-rotate {
    100% {
        stroke-dashoffset: 0;
        transform: rotate(0deg)
    }
}
@keyframes _draw-line {
    100% {
        stroke-dashoffset: 0;
    }
}
@keyframes _draw-circle {
    0% {
        transform: scale(0.7);
        opacity: 1;
    }
    45% {
        transform: scale(1.2);
        opacity: 1;
    }
    80% {
        transform: scale(0.8);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes _draw-waiting {
    0% {
        stroke-dasharray: 0, 229;
        stroke-dashoffset: -0;
    }
    50% {
        stroke-dasharray: 114, 129;
        stroke-dashoffset: -57;
    }
    100% {
        stroke-dasharray: 0, 229;
        stroke-dashoffset: -228;
    }
}
@keyframes _draw-waiting2 {
    0% {
        stroke-dasharray: 0, 250;
        stroke-dashoffset: -0;
    }
    50% {
        stroke-dasharray: 125, 250;
        stroke-dashoffset: -62;
    }
    100% {
        stroke-dasharray: 0, 250;
        stroke-dashoffset: -249;
    }
}
