/* -------------------------------------------
    Highlight
---------------------------------------------- */

@import '../../../assets/sass/config';
@import '../../assets/sass/mixins/direction';
@import '../../assets/sass/mixins/mixins';

.highlight {
    --alpha-highlight-offset-y: 0px;

    position: relative;

    path {
        animation-name: highlight-anim-text;
        animation-duration: 5s;
        animation-delay: 2s;
        animation-fill-mode: forwards;
        fill: none;
        stroke-width: 4;
        stroke-dasharray: 1500;
        stroke-linecap: round;
        stroke-linejoin: round;
        -animation-iteration-count: 1;
        opacity: 0;
    }
}

.highlight svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    z-index: auto;
    margin-top: var(--alpha-highlight-offset-y);
}

.highlight-text .highlight svg {
    overflow: visible;
}

.highlight-infinite svg path {
    animation-name: highlight-anim-text-infinite;
}

@keyframes highlight-anim-text {
    0% {
        opacity: 1;
        stroke-dasharray: 0 1500;
    }

    12% {
        stroke-dasharray: 1500 1500;
    }

    100% {
        opacity: 1;
    }
}

@keyframes highlight-anim-text-infinite {
    0% {
        opacity: 1;
        stroke-dasharray: 0 1500;
    }

    12% {
        stroke-dasharray: 1500 1500;
    }

    80% {
        opacity: 1;
    }

    97% {
        opacity: 0;
        stroke-dasharray: 1500 1500;
    }

    100% {
        stroke-dasharray: 0 1500;
    }
}

.highlight-curly svg {
    transform: translate(-50%, 25%);
}

.highlight-x svg {
    transform: translate(-50%, -35%);
}

.highlight-strikethrough svg {
    transform: translate(-50%, -47%);
}

.highlight-underline svg {
    transform: translate(-50%, 27%);
}

.highlight-underline-2 svg {
    transform: translate(-50%, 35%);
}

.highlight-double svg {
    transform: translate(-50%, -40%);
}

.highlight-double-underline svg {
    transform: translate(-50%, 30%);
}

.highlight-diagonal svg {
    transform: translate(-50%, -40%);
}

.highlight-fill {
    background-image: linear-gradient(var(--alpha-primary-color), var(--alpha-primary-color));
    background-size: 0% var(--alpha-highlight-bg-size, 30%);
    background-repeat: no-repeat;
    background-position: #{$left} bottom;
    transition: background-size 1.5s, color 1.5s;

    &.animating {
        background-size: 100% var(--alpha-highlight-bg-size, 30%);
    }

    &.animated-done {
        transition: background-size .2s;
    }
}

.highlight-text span.highlight-fill:hover {
    background-size: 100% 100%;
    transition: background-size .2s, color .2s;
}