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


.search.main-sidebar {
    form {
        @icon-size: 40px;

        display: block;
        margin: @margin-default 0;

        .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"] {
            .fontello();
            .hide-text-show-before();
            .icon-search();

            position: relative;
            width: @icon-size;
            min-height: @icon-size;
            overflow: visible;
            background-image: none;
            background-color: transparent;
            border: solid 1px transparent;
            border-right-color: @color-border;
            color: @color-nav;
            margin-left: -(@icon-size);
            padding: 0;
            transition: @transition color, @transition border-color;

            &:hover,
            &:focus,
            &:active {
                border: solid 1px @button_color;
                color: @button_color;

                &::after {
                    background-color: @button_color;
                }
            }

            &::before {
                width: 100%;
                color: inherit;
                font-size: 25px;
                text-align: center;
                margin: 0;
            }

            &::after {
                content: '';
                position: absolute;
                top: 15%;
                bottom: 15%;
                width: 1px;
                left: -1px;
                background-color: @color-border;
                transition: @transition background-color;
            }
        }
    }
}