@use 'iro-sass/src/index' as iro;

@include iro.props-namespace('icon') {
    @include iro.bem-object(iro.props-namespace()) {
        display:         inline-block;
        width:           1em;
        height:          1em;
        stroke-width:    var(--icon-stroke-width, 1.5px);
        stroke-linecap:  round;
        stroke-linejoin: round;
        vertical-align:  -.2em;

        @include iro.bem-modifier('block') {
            display: block;
        }
    }

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

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

        50% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -35px;
        }

        100% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -124px;
        }
    }
}