@import './var.less';

@keyframes apparent{
    from {
        opacity: 1;
        // transform: scale(1);
    }

    25%{
        opacity: 0.7;
        // transform: scale(0.98);
    }

    50%{
        opacity: 0.3;
        // transform: scale(0.95);
    }

    75%{
        opacity: 0.7;
        // transform: scale(0.98);
    }

    to {
        opacity: 1;
        // transform: scale(1);
    }
}
@keyframes rotation{
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
@keyframes rotationContrast{
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}
@keyframes popup{
    from {
        transform: scale(0);
    }

    52%{
        transform: scale(1);
    }

    76%{
        transform: scale(1.12);
    }

    to {
        transform: scale(1);
    }
}
@keyframes popin{
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0);
    }
}
@keyframes formFocusAnimate{
    from {
        box-shadow: 0 0 0 1px rgba(red(@colorFormBorderFocus), green(@colorFormBorderFocus), blue(@colorFormBorderFocus), 0.4);
    }

    45%{
        box-shadow: 0 0 0 2.5px rgba(red(@colorFormBorderFocus), green(@colorFormBorderFocus), blue(@colorFormBorderFocus), 0.25);
    }

    90%{
        box-shadow: 0 0 0 4px rgba(red(@colorFormBorderFocus), green(@colorFormBorderFocus), blue(@colorFormBorderFocus), 0.1);
    }

    to {
        box-shadow: 0 0 0 4px rgba(red(@colorFormBorderFocus), green(@colorFormBorderFocus), blue(@colorFormBorderFocus), 0);
    }
}

each(@colorSetTheme, {
    @keyframes ~'formFocusAnimate@{key}' {
        from {
            box-shadow: 0 0 0 1px rgba(red(@value), green(@value), blue(@value), 0.4);
        }

        45%{
            box-shadow: 0 0 0 2.5px rgba(red(@value), green(@value), blue(@value), 0.25);
        }

        90%{
            box-shadow: 0 0 0 4px rgba(red(@value), green(@value), blue(@value), 0.1);
        }

        to {
            box-shadow: 0 0 0 4px rgba(red(@value), green(@value), blue(@value), 0);
        }
    }
});

each(@colorSetFeatures, {
    @keyframes ~'formFocusAnimate@{key}' {
        from {
            box-shadow: 0 0 0 1px rgba(red(@value), green(@value), blue(@value), 0.4);
        }

        45%{
            box-shadow: 0 0 0 2.5px rgba(red(@value), green(@value), blue(@value), 0.25);
        }

        90%{
            box-shadow: 0 0 0 4px rgba(red(@value), green(@value), blue(@value), 0.1);
        }

        to {
            box-shadow: 0 0 0 4px rgba(red(@value), green(@value), blue(@value), 0);
        }
    }
});