/*!
 * Copyright (c) 2014-present Cliqz GmbH. All rights reserved.
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

@import 'variables.scss';

@mixin bg-animation {
    background-image: url('../images/antiphishing_password.svg'),
        url('../images/antiphishing_rod_query.svg'),
        url('../images/antiphishing_summer_bali.svg'),
        url('../images/antiphishing_sunshine98.svg'),
        url('../images/antiphishing_welcome2home.svg'),
        url('../images/antiphishing_12344411.svg'),
        url('../images/antiphishing_rod_no_query.svg'),
        url('../images/antiphishing_rod_right.svg'),
        url('../images/antiphishing_rod_right.svg');
}

@keyframes antiphishingLayoutAnimation {
    0% {
        @include bg-animation;
        background-position: 1% 98%, 8% 105%, 25% 92%, 89% 73%, 97% 56%, 99% 92%, 91% 110%, 79% 102%, 4% 112%;
    }
    25% {
        @include bg-animation;
        background-position: 1% 98%, 8% 105%, 25% 92%, 89% 73%, 97% 56%, 99% 92%, 91% 390%, 79% 102%, 4% 112%;
    }
    75% {
        @include bg-animation;
        background-position: 1% 98%, 8% 355%, 25% 92%, 89% 73%, 97% 56%, 99% 92%, 91% 110%, 79% 102%, 4% 112%;
    }
    100% {
        background-image: url('../images/antiphishing_password.svg'),
            url('../images/antiphishing_rod_no_query.svg'),
            url('../images/antiphishing_summer_bali.svg'),
            url('../images/antiphishing_sunshine98.svg'),
            url('../images/antiphishing_welcome2home.svg'),
            url('../images/antiphishing_12344411.svg'),
            url('../images/antiphishing_rod_no_query.svg'),
            url('../images/antiphishing_rod_right.svg'),
            url('../images/antiphishing_rod_right.svg');
        background-position: 1% 98%, 8% 105%, 25% 92%, 89% 73%, 97% 56%, 99% 92%, 91% 110%, 79% 102%, 4% 112%;
    }
}

@keyframes antiphishingLayoutBeforeAnimation {
    0%, 75% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.antiphishing {
    &-ctrl-content {
        background: url('../images/antiphishing_icon_off.png') left center no-repeat;
        background-size: auto 85%;
    }

    &-headline {
        position: relative;

        &:before {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            margin-left: -158px;
            background-image: url('../images/antiphishing_off.png');
            background-position: 0 center;
            background-repeat: no-repeat;
            background-size: 100% auto;
            width: 316px;
            height: 200px;
        }
    }
}

.antiphishing-toggled {
    .antiphishing-ctrl {
        &-status {
            color: $slider-bg-on;
        }

        &-content {
            background-image: url('../images/antiphishing_icon_on.png');
            color: #000;
        }
    }

    .antiphishing-headline {
        color: $cliqz-blue;

        &:before {
            background-image: url('../images/antiphishing_on.png');
            background-position: 1px center;
        }
    }
}

.antiphishing-layout, .antiphishing-layout-toggled {
    background-image: url('../images/antiphishing_password_after.svg'),
        url('../images/antiphishing_v_qwerty_after.svg'),
        url('../images/antiphishing_summer_bali_after.svg'),
        url('../images/antiphishing_sunshine98_after.svg'),
        url('../images/antiphishing_welcome2home_after.svg'),
        url('../images/antiphishing_12344411_after.svg');
    background-position: 1% 98%, 7% 74%, 25% 92%, 89% 73%, 97% 56%, 99% 92%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    animation: none;

    &:before {
        animation: none;
    }
}

.antiphishing-layout {
    @include bg-animation;
    background-position: 1% 98%, 8% 105%, 25% 92%, 89% 73%, 97% 56%, 99% 92%, 91% 110%, 79% 102%, 4% 112%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    animation: antiphishingLayoutAnimation 7s ease-in-out;
    animation-iteration-count: infinite;

    &:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: url('../images/antiphishing_v_qwerty.svg') 8% 105% no-repeat;

        animation: antiphishingLayoutBeforeAnimation 7s ease-in-out;
        animation-iteration-count: infinite;
    }
}
