/*!
 * 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 'configs.scss';
@import 'themes.scss';
@import 'undo-notifications.scss';
@import 'speed-dials.scss';
@import 'url-bar.scss';
@import 'url-bar-with-results.scss';
@import 'news.scss';
@import 'stats.scss';
@import 'settings.scss';
@import 'switch.scss';
@import 'tooltip.scss';
@import 'modal.scss';
@import 'overlay.scss';
@import 'overlayPopup.scss';
@import "mixins";

@mixin container($config, $theme)
{
    $base-configs: map-get($config, base);
    $speed-dials-configs: map-merge($base-configs, map-get($config, speed-dials));
    $url-bar-configs: map-merge($base-configs, map-get($config, url-bar));
    $news-configs: map-get($config, news);
    $stats-configs: map-merge($news-configs, map-get($config, stats));
    $tooltip-configs: map-get($config, tooltip);

    $base-theme: map-get($theme, base);
    $speed-dials-theme: map-get($theme, speed-dials);
    $url-bar-theme: map-get($theme, url-bar);
    $news-theme: map-get($theme, news);

    #app {
        display: flex;
        min-height: 100vh;

        &:before {
            display: block;
            position: fixed;
            z-index: -1;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: map-get($base-theme, background-mask-color);
            content: ' ';
        }
    }

    @include settings(map-get($base-theme, cliqz-settings-bg));

    #cliqz-history {
        background: map-get($base-theme, cliqz-history-bg);
    }

    #cliqz-worldcup:after {
        background: map-get($base-theme, cliqz-worldcup-bg);
    }

    #settings-btn {
        background: map-get($base-theme, cliqz-settings-bg);
    }

    #cliqz-modules-btn {
        background: map-get($base-theme, cliqz-modules-bg);
    }

    .aside {
        flex: 0 0 map-get($base-configs, aside-width);
    }

    .aside-button {
        display: block;
        margin: 20px auto;
        width: 24px;
        height: 24px;
        color: transparent;
        font-size: 0;
        text-decoration: none;
        border: 0;
        cursor: pointer;
        position: relative;
        opacity:0.6;

        &:after {
            content:"";
            position: absolute;
            width: 100%;
            height:100%;
            opacity: 0.75;
        }

        &:hover {
            opacity: 1;
        }
    }

    /* SPECIAL CASE: SIDE-BAR BUTTONS ON SMALL SCREENS */
    @media only screen and (max-width: 507px) {
        .aside-button {
            display: none;
        }
    }

    @media only screen and (min-width: 508px) and (max-width: 648px) {
        .aside-button {
            margin-left: 13px;
            margin-right: 13px;
        }
    }

    #main-content {
        display: flex;
        flex: 1;
        justify-content: center;
        max-width: 100%;
    }

    .fixed-container {
        max-width: map-get($base-configs, container-width);
        display: flex;
        flex: 1;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .content-section {
        width: 100%;
        text-align: center;
    }

    #section-middle {
        margin-top: map-get($base-configs, section-padding);
        margin-bottom: map-get($base-configs, section-padding);
    }

    @include speed-dials(map-merge($speed-dials-configs, $speed-dials-theme)...);
    @include url-bar(map-merge($url-bar-configs, $url-bar-theme)...);
    @include url-bar-with-results(map-merge($url-bar-configs, $url-bar-theme)...);
    @include news(map-merge($news-configs, $news-theme)...);
    @include stats(map-merge($stats-configs, $news-theme)...);
    @include tooltip($tooltip-configs...);
}

@mixin responsive($theme) {
    $config: map-get($configs, xsmall);
    @include container($config, $theme);
    $modal-configs: map-get($config, modal);
    @include modal($modal-configs...);

    @media only screen and (min-width: 650px) {
        $config: map-get($configs, small);
        @include container($config, $theme);
        $modal-configs: map-get($config, modal);
        @include modal($modal-configs...);
    }
    @media only screen and (min-width: 920px) {
        $config: map-get($configs, xmedium);
        @include container($config, $theme);
        $modal-configs: map-get($config, modal);
        @include modal($modal-configs...);
    }
    @media only screen and (min-width: 1024px) {
        $config: map-get($configs, medium);
        @include container($config, $theme);
        $modal-configs: map-get($config, modal);
        @include modal($modal-configs...);
    }
    @media only screen and (min-width: 1600px) {
        $config: map-get($configs, large);
        @include container($config, $theme);
        $modal-configs: map-get($config, modal);
        @include modal($modal-configs...);
    }
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: "-mac-system", "-apple-system", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    outline: none;
}

html {
    position: relative;
    overflow-x: hidden;
    width: 100vw;
}

button::-moz-focus-inner {
     border: 0;
}

.hide {
    display: none!important;
}

.show {
    display: block!important;
}

body {
    background: #fff no-repeat center center fixed;
    background-size: cover;

    $dark-theme: map-get($themes, dark);

    @include responsive($dark-theme);
    @include undo-notifications(map-get($dark-theme, base)...);
}

#onboarding {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 102;
    border: 0;
}

#overlay {
    display: none;
    z-index: 10;
    opacity: 0;
    transition: opacity .15s;

    &.open {
        display: block;
        opacity: 1;
    }
}

.theme-bg-light {
    background-color: #7a888f;
    background-image: cdnUrl('extension/newtab/background/light2.jpg');
}

.theme-bg-dark {
    background-color: #11324b;
    background-image: cdnUrl('extension/newtab/background/dark2.jpg');
}

.theme-bg-alps {
    background-color: #00a6ae;
    background-image: cdnUrl('extension/newtab/background/alps2.jpg');
}

.theme-bg-winter {
    background-color: #1185a8;
    background-image: cdnUrl('extension/newtab/background/winter2.jpg');
}

.theme-bg-matterhorn {
    background-color: #138ab0;
    background-image: cdnUrl('extension/newtab/background/matterhorn2.jpg');
}

.theme-bg-spring {
    background-color: #3383a5;
    background-image: cdnUrl('extension/newtab/background/spring2.jpg');
}

.theme-bg-worldcup {
    background-color: #00080c;
    background-image: cdnUrl('extension/newtab/background/worldcup2.jpg');
}

.theme-bg-summer {
    background-color: #007296;
    background-image: cdnUrl('extension/newtab/background/summer2.jpg');
}

.theme-bg-autumn {
    background-color: #436b8d;
    background-image: cdnUrl('extension/newtab/background/autumn2.jpg');
}

.theme-bg-ghostery {
    background-color: #00adf3;
    background-image: url(https://cdn2.ghostery.com/extension/newtab/background/ghostery-tab.jpg);
}

.theme-bg-ghostery-forest {
    background-color: #1D3D42;
    background-image: url(https://cdn2.ghostery.com/extension/newtab/background/ghostery-tab-forest.jpg);
}

.theme-bg-ghostery-city {
    background-color: #161523;
    background-image: url(https://cdn2.ghostery.com/extension/newtab/background/ghostery-tab-city.jpg);
}

.theme-bg-ghostery-net {
    background-color: #1A303F;
    background-image: url(https://cdn2.ghostery.com/extension/newtab/background/ghostery-tab-net.jpg);
}

.theme-bg-ghostery-ghosties {
    background-color: #1A9FD7;
    background-image: url(https://cdn2.ghostery.com/extension/newtab/background/ghostery-tab-ghosties.jpg);
}

.theme-bg-ghostery-ghosty {
    background-color: #595B58;
    background-image: url(https://cdn2.ghostery.com/extension/newtab/background/ghostery-tab-ghosty.jpg);
}
.theme-bg-ghostery-dark {
    background-color: #23A5D7;
    background-image: url(https://cdn2.ghostery.com/extension/newtab/background/ghostery-tab-dark.jpg);
}

.theme-bg-default {
    $light-theme: map-get($themes, light);

    @include responsive($light-theme);
    @include undo-notifications(map-get($light-theme, base)...);
}
