/*!
 * 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/.
 */

@mixin url-bar (
    $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,
){

    #section-top {
        padding-top: $search-logo-size;
        background: $cliqz-logo-bg;
        background-size: auto $search-logo-size;
    }

    .search {
        margin: 0 auto;
        position: relative;
        margin-top: $search-input-height;

        ::placeholder {
            font-size: $search-font-size;
            color:    $search-input-color;
            opacity:  1;
        }
    }

    .urlbarSearch {
        height: $search-input-height;
        border-radius: 4px;
        border: $search-input-border;
        box-shadow: $search-input-box-shadow;
        width: $inner-content-width;
        padding: 0 47px 0 $search-text-indent;
        background-repeat: no-repeat;
        font-size: $search-font-size;
        color: $search-input-color;
        transition: box-shadow 180ms cubic-bezier(0.4, 0.0, 0.2, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        background-size: auto 50%;
        background-position: 2% 52%;
        background-image: $search-input-cliqz-bg-image;

        &:focus, &:hover {
            box-shadow: $search-input-box-shadow-focus;
        }
    }

    .with-dropdown .urlbarSearch {
        border-radius: 4px 4px 0 0;
    }

    .product-ghostery {
        #section-top {
            background: $ghostery-tab-logo-bg;
            background-size: auto $search-logo-size;
        }
    }

    .no-logo #section-top {
        padding-top: 0;
        background-image: none;
    }
}
