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

@mixin url-bar-with-results (
    $aside-width,
    $container-width,
    $section-padding,
    $inner-content-width,

    $search-size,
    $search-input-height,
    $search-font-size,
    $search-text-indent,
    $search-logo-size,

    $search-input-box-shadow,
    $search-input-border,
    $search-input-box-shadow-focus,
    $search-input-color,
    $search-input-cliqz-bg-image,
    $search-input-ghostery-bg-image,
    $cliqz-logo-bg,
    $ghostery-tab-logo-bg,
) {
    $width: $inner-content-width;

    #section-url-bar {
        position: relative;

        .with-results {
            position: relative;
            z-index: 15;
        }

        .urlbarSearch {
            width: $width;
            color: #000;
        }

        .inner-container {
            width: $inner-content-width;
            margin: 0 auto;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 100;
            box-shadow: $search-input-box-shadow-focus;
        }

        #cliqz-control-center-iframe, #cliqz-dropdown-iframe {
            display: block;
            width: 100%;
            border: 0;
            height: 0;
            border-radius: 0 0 4px 4px;
            box-shadow: 0 -1px rgb(225, 225, 225);
            transition: height 40ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
        }

        .search-settings-btn {
            position: absolute;
            right: 0;
            top: -#{$search-input-height};
            background-image: url("../images/search-setting-icon.svg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: auto 36%;
            background-color: transparent;
            width: $search-input-height;
            height: $search-input-height;
            border: 0;
            z-index: 15;
            cursor: pointer;

            &:active, &:hover, &.active {
                background-image: url("../images/search-setting-click.svg");
            }
        }
    }
}
