// Defines a css animation keyframes specific for this section with stop points
// at 1/3 and 2/3. This way, the animation runs for a third of the allocated
// time, shows the desired state for a third of the time and reverts for - you
// guessed it - a third of the time.
.keyframes(@name, @rules-inital, @rules-target) {
    @-webkit-keyframes @name {
        0%   { @rules-inital(); }
        33%  { @rules-target(); }
        66%  { @rules-target(); }
        100% { @rules-inital(); }
    }

    @-moz-keyframes @name {
        0%   { @rules-inital(); }
        33%  { @rules-target(); }
        66%  { @rules-target(); }
        100% { @rules-inital(); }
    }

    @-o-keyframes @name {
        0%   { @rules-inital(); }
        33%  { @rules-target(); }
        66%  { @rules-target(); }
        100% { @rules-inital(); }
    }

    @keyframes @name {
        0%   { @rules-inital(); }
        33%  { @rules-target(); }
        66%  { @rules-target(); }
        100% { @rules-inital(); }
    }
}

// Defines an css animation with vendor prefixes
.animation(@arguments) {
    -webkit-animation: @arguments;
    -moz-animation: @arguments;
    animation: @arguments;
}

.copyable-link-animation {
    @animation-name: copyable-links-confirmation;
    @animation-duration: 1.5s;

    // Position confirmation message above the link
    position: relative;

    div {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        text-align: center;

        .icon('before', 'check-circle', 'status-green', 16px, 5px);
    }

    // Hide the link if no animations are available
    html.no-cssanimations & {
        a {
            visibility: hidden;
        }
    }

    // Flip the link and confirmation message along the x axis when animations
    // are available
    html.cssanimations & {
        a,
        div {
            backface-visibility: hidden;
            pointer-events: none;
        }

        a {
            .keyframes(~"@{animation-name}-front", {
                opacity: 1;
                transform: rotateX(0);
            }, {
               opacity: 0;
                transform: rotateX(180deg);
            });
            .animation(~"@{animation-name}-front" @animation-duration linear);
        }

        div {
            .keyframes(~"@{animation-name}-back", {
                opacity: 0;
                transform: rotateX(180deg);
            }, {
                opacity: 1;
                transform: rotateX(0);
            });
            .animation(~"@{animation-name}-back" @animation-duration linear);
        }

    }
}