/*!
 * 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';

$settings-panel-width: 270px;

@mixin settings (
    $cliqz-settings-bg
){

    #settings-panel {
        width: $settings-panel-width;
        background: #fff;
        position: absolute;
        top: 0px;
        right: 0px;
        height: 100%;
        overflow: auto;
        overflow-x: hidden;
        box-shadow: 0px 1px 2px 0px get-color-black-opacity(0.24);
        z-index: 2000;

        .close {
            background: url(../images/settings-close.svg) no-repeat center center;
            background-size: 14px;
            position: absolute;
            right: 25px;
            display: block;
            margin: 20px auto;
            width: 24px;
            height: 24px;
            opacity: 0.4;
            color: transparent;
            font-size: 0px;
            text-decoration: none;
            border: 0;
            cursor: pointer;

            &:hover {
                opacity: 1;
            }
        }

        .link {
            margin-top: 4px;
            font-size: 9px;
            text-transform: uppercase;
            color: $color-cliqz-blue;
            border: 0;
            display: block;
            cursor: pointer;
            background: url(../images/restore.png) no-repeat 0 0;
            background-size: 14px;
            padding-left: 17px;
            line-height: 15px;

            &:hover {
                color: $color-dark-blue;
                background-position: 0 -14px;
            }

            &[disabled] {
                background-position: 0 -28px;
                cursor: default;
                color: #B3B3B4;
                text-decoration: none;
            }
        }

        .settings-header {
            padding: 20px 0 20px 20px;

            .header {
                font-size: 18px;
                font-weight: 500;
                color: get-color-black-opacity(0.8);
            }
        }

        .settings-row {
            padding: 12px 20px;
            line-height: 21px;
            width: $settings-panel-width;
        }

        .btns-wrapper {
            margin-top: 4px;
            color: get-color-black-opacity(0.7);
            font-size: 12px;

            input[type=radio] {
                cursor: pointer;
            }

            .input-label {
                cursor: pointer;
                padding-left: 6px;
            }
        }

        .label {
            font-size: 14px;
            color: get-color-black-opacity(0.7);
        }

        .news-editions-wrapper {
            padding-top: 7px;
            padding-right: 25px;
        }

        .news-editions-select {
            width: 100%;
            cursor: pointer;
            height: 30px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 12px;
            appearance: none;
            -webkit-appearance: none;
            padding: 1px 18px 1px 5px;
            background-image: url("../images/dropmarker.png");
            background-repeat: no-repeat;
            background-position: 96% center;

            &:-moz-focusring {
                color: transparent;
                text-shadow: 0 0 0 #000;
            }
        }

        .browser-settings {
            font-size: 12px;
            border: none;
            background: transparent;
            color: get-color-black-opacity(0.7);

            &:hover {
                color: $color-cliqz-blue;
            }
        }

        .background-selection-list {
            list-style: none;
        }

        .selected-img {
            position: absolute;
            top: 0px;
            left: 0px;
            width: calc(100% - 5px);
            height: 100%;
            display: none;
        }

        .background-item {
            display: inline-block;
            padding-right: 5px;
            position: relative;
            cursor: pointer;
            margin-bottom: 4px;

            .bg-thumbnail {
                width: 71px;
                height: 43px;
                background-size: cover;
            }

            &:hover .selected-img,
            .active .selected-img {
                display: flex;
                align-items: center;
                justify-content: center
            }
        }

        .image {
            box-shadow: 0px 0px 2px 0px get-color-black-opacity(0.15);
        }

        .background-selection-wrapper {
            padding-top: 0;
        }

        .custom-background {
            #custom-bg-input {
                display: none;
            }

            label.link {
                background-image: none;
                padding-left: 0;
            }
        }
    }
}
