/**
 * This file provides the design styles for the quick search.
 *
 * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
 */

.search.main-sidebar {
    @icon-size: @page-header_height;
    @icon-search_font-size: 25px;
    p.toggleSearch a,
    button[type="submit"] {
        .fontello();
        .hide-text-show-before();
        .icon-search();
        position: relative;
        width: @icon-size;
        min-height: @icon-size;
        overflow: visible;
        background-image: none;
        background-color: transparent;
        color: @color-nav;
        padding: 0;
        transition: @transition color, @transition background-color, @transition border-color;
        &:hover,
        &:focus,
        &:active {
            background-color: @button_color;
            border: solid 1px @button_background;
            color: @button_background;
            &::after {
                background-color: @button_background;
            }
        }
        &::before {
            width: 100%;
            color: inherit;
            font-size: @icon-search_font-size;
            text-align: center;
            margin: 0;
        }
    }
    p.toggleSearch {
        display: none;
        margin: -1px 0 0;
        padding: 0;
        a {
            width: @toggle-showsidebar_width;
            border: solid 1px transparent;
            border-bottom: solid 1px @color-border;
            border-radius: @fix_border-radius 0 0 0;
            text-decoration: none;
            &:hover,
            &:focus,
            &:active {
                border-radius: @fix_border-radius 0 0 @fix_border-radius;
            }
            &::before {
                position: absolute;
                top: 50%;
                left: .8rem;
                text-align: left;
                margin-top: -(@icon-search_font-size / 2);
            }
        }
    }
    /* + + +  form  + + + */
    form {
        display: block;
        margin: 0 0 @margin-default;
        .no {
            #qsearch__in {
                width: 100%;
                padding-left: 10px;
                padding-right: (@icon-size + 10);
            }
        }
        input {
            min-height: @icon-size;
            box-sizing: border-box;
        }
        button[type="submit"] {
            border: solid 1px transparent;
            border-right-color: @color-border;
            margin-left: -(@icon-size);
            &::after {
                content: '';
                position: absolute;
                top: 15%;
                bottom: 15%;
                width: 1px;
                left: -1px;
                background-color: @color-border;
                transition: @transition background-color;
            }
        }
    }

    #qsearch__out {
        left: auto;
        top: auto;
        width: 100%;
    }
}
.wide-content {
    .search.main-sidebar {
        p.toggleSearch {
            display: block;
            float: left;
            width: 100%;
        }
        form {
            input {
                border: 0 none;
            }
            .no {
                #qsearch__in {
                    width: 0;
                    padding: 0;
                    margin: 0;
                }
                button[type="submit"] {
                    display: none;
                }
            }
        }
    }
}