<a href="https://www.animato.cz/" title="Studio Animato" rel="noopener" target="_blank">
	<span class="a-animato">Studio Animato</span>
</a>

$a-animato-width: 115px !default;
$a-animato-height: 16px !default;
$a-animato-color: currentColor !default;
$a-animato-color-hover: color('red') !default;
$a-animato-logo: '//shared.animato.cz/imgs_system/svg/logo.svg';

.a-animato {

    display: inline-block;
    font-size: 0;
    height: $a-animato-height;
    position: relative;
    width: $a-animato-width;

    &:before {

        //background-color: $a-animato-color;
        content: '';
        height: 100%;
        left: 0;
        mask-image: url($a-animato-logo);
        mask-repeat: no-repeat;
        mask-size: contain;
        position: absolute;
        top: 0;
        width: 100%;

    }

    :link > & {

        cursor: pointer;

        &:before {

            background: $a-animato-color linear-gradient(-50deg, transparent 0%, transparent 45%, lighten($a-animato-color-hover, 30%) 50%, transparent 55%, transparent 100%) 85% 0 / 300% 100% no-repeat;
            transition: background-color $base-transition;

        }

        &:hover {

            &:before {

                animation: glanc .6s ease .2s forwards;
                background-color: $a-animato-color-hover;

            }

        }

    }

}

@keyframes glanc {

    0% {

        background-position: 85% 0;

    }

    10% {

        background-position: 70% 0;

    }

    40% {

        background-position: 60% 0;

    }

    60% {

        background-position: 50% 0;

    }

    100% {

        background-position: 10% 0;

    }

}