static/css/impala/suggestions.less

@import 'lib';

#site-search-suggestions {
    .transition-property(~'bottom, opacity, visibility');
    .transition-duration(.3s);
    font: 13px/26px @sans-stack;
    height: 0;
    opacity: 0;
    position: absolute;
    right: -10px;
    bottom: -5px;
    left: -10px;
    visibility: hidden;
    z-index: 53;
    &.visible {
        opacity: 1;
        bottom: -15px;
        visibility: visible;
    }
    .wrap {
        background: #fff;
        border: 1px solid @shadow-blue;
        .border-radius(4px);
        .box-shadow(0 0 4px rgba(0,0,0,.2), 0 -2px 0 @inset-blue inset);
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        &:before {
            background: url(../../img/impala/search-stem.png) 50% 100% no-repeat;
            content: "";
            display: block;
            height: 20px;
            position: absolute;
            top: -20px;
            left: 14px;
            width: 40px;
        }
    }
    ul {
        margin: 0 16px 10px;
    }
    p {
        margin: 10px 16px 0;
    }
    a {
        display: block;
        text-decoration: none;

        &:after {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }
        span, .subtitle {
            display: block;
            float: left;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        span {
            .border-box();
            background: no-repeat 4px 50%;
            .background-size(20px auto);
            max-width: 280px;
            padding: 2px 2px 2px 32px;
            &.cat {
                background-image: url(../../img/icons/search-cat.png);
            }
            &.app {
                background-image: url(../../img/app-icons/16/sprite.png);
                .background-size(18px auto);
                background-position: 4px 6px;
                min-height: 0 !important;
            }
            &.thunderbird {
                background-position: 5px -30px;
            }
            &.seamonkey {
                background-position: 4px -66px;
            }
            &.sunbird {
                background-position: 4px -100px;
            }
            &.android {
                background-position: 4px -138px;
            }
        }
        .subtitle {
            color: @note-gray;
            font-size: 12px;
            font-style: normal;
            line-height: 30px;
            margin-left: 5px;
        }
    }
    a:hover,
    a.sel,
    &.sel a.sel:hover {
        background-color: #EBF4FE;
        color: #447BC4;
    }
    &.sel a:hover {
        background-color: transparent;
        color: @link;
    }
}

.html-rtl #site-search-suggestions {
    .wrap:before {
        left: auto;
        right: 14px;
    }
    a span {
        background-position: right;
        float: none;
        padding: 2px 32px 2px 2px;
    }
}