@import './var.scss';
@import '../../Style/mixin/index.scss';

:root {
    --icon-primary-color: #{$icon-primary-color};
    --icon-grey-color: #{$icon-grey-color};
    --icon-blue-color: #{$icon-blue-color};
    --icon-white-color: #{$icon-white-color};
    --icon-black-color: #{$icon-black-color};
    --icon-red-color: #{$icon-red-color};
    --icon-orange-color: #{$icon-orange-color};
    --icon-green-color: #{$icon-green-color};
    --icon-shy-blue-color: #{$icon-shy-blue-color};
    --icon-fill-color: #{$icon-fill-color};
    --icon-size-lg: #{$icon-size-lg};
    --icon-size-md: #{$icon-size-md};
    --icon-size-sm: #{$icon-size-sm};
    --icon-size-auto: #{$icon-size-auto};
    --icon-loading-color: #{$icon-loading-color};
}

.jing-icon {
    display: inline-block;
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -0.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    svg {
        display: inline-block;
        width: 100%;
        height: 100%;
        // @include iconColorFn(var(--icon-primary-color));
    }

    &--default svg {
        @include iconColorFn(var(--icon-primary-color));
    }

    &--grey svg {
        @include iconColorFn(var(--icon-grey-color));
    }

    &--blue svg {
        @include iconColorFn(var(--icon-blue-color));
    }

    &--white svg {
        @include iconColorFn(var(--icon-white-color));
    }

    &--black svg {
        @include iconColorFn(var(--icon-black-color));
    }

    &--red svg {
        @include iconColorFn(var(--icon-red-color));
    }

    &--orange svg {
        @include iconColorFn(var(--icon-orange-color));
    }

    &--green svg {
        @include iconColorFn(var(--icon-green-color));
    }

    &--shy-blue svg {
        @include iconColorFn(var(--icon-shy-blue-color));
    }

    &--lg {
        width: var(--icon-size-lg);
        height: var(--icon-size-lg);
    }

    &--md {
        width: var(--icon-size-md);
        height: var(--icon-size-md);
    }

    &--sm {
        width: var(--icon-size-sm);
        height: var(--icon-size-sm);
    }

    &--auto {
        width: var(--icon-size-auto);
        height: var(--icon-size-auto);
    }

    &--loading {
        transform: rotate(-90deg);

        svg {
            fill: none;
            vertical-align: top;
            animation: jing-activity-ratate360 2s linear infinite;

            circle {
                stroke: var(--icon-loading-color);
                fill: none;
                stroke-width: 5;
                stroke-linecap: round;
                animation: jing-activity-rotate-circular 1.5s ease-in-out
                    infinite;
            }
        }
    }
}