/**
 * Roundcube webmail styles for the Elastic skin
 *
 * Copyright (c) 2017, The Roundcube Dev Team
 *
 * The contents are subject to the Creative Commons Attribution-ShareAlike
 * License. It is allowed to copy, distribute, transmit and to adapt the work
 * by keeping credits to the original authors in the README.md file.
 * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
 */

/*** Searchbar and searchfilterbar widgets ***/

.searchbar {
    position: absolute;
    background-color: @color-layout-header-background;
    right: .25rem;
    height: @layout-header-height;
    display: block !important;

    a.button {
        min-width: auto;
        padding: 0;
        display: block;

        &:before {
            line-height: @layout-header-height;
        }
    }

    .input-group {
        margin-top: calc(@layout-header-height/2 - 2.25rem/2);
        display: none;
        padding: 0 .5rem;

        .icon:before {
            font-size: 1em;
            line-height: 1.1;
        }

        .icon.filter,
        .icon.search {
            color: #888;
        }
    }

    form {
        display: none;
    }

    a.icon {
        &:before {
            &:extend(.font-icon-class);
            margin: 0;
        }

        &.reset:before {
            content: @fa-var-trash-alt;
        }
        &.options:before {
            content: @fa-var-angle-down;
        }
    }

    &.active a.button.search {
        color: @color-searchbar-icon-active;
    }

    &.open {
        z-index: 10;
        left: 0 !important;
        right: 0 !important;

        .input-group {
            display: flex;
        }

        form {
            display: flex;
        }

        a.button.filter,
        a.button.search {
            display: none;
        }
    }
}

.searchfilterbar {
    right: @layout-touch-icon-width + .25rem;

    &.active a.button.filter {
        color: @color-searchbar-icon-active;
    }
}

html.ie11 {
    .searchbar {
        a.button.filter:before,
        a.button.search:before {
            line-height: 3.2;
            font-size: 1.25rem;
        }
    }
}