/*
 * Font Awesome Icon Picker
 * http://mjolnic.github.io/fontawesome-iconpicker/
 *
 * Originally written by (c) 2014 Javier Aguilar @mjolnic
 * Licensed under the MIT License
 * https://github.com/mjolnic/fontawesome-iconpicker/blob/master/LICENSE
 *
 */

//
// Popovers
// --------------------------------------------------


.iconpicker-popover.popover {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    max-width: none;
    padding: 1px;
    text-align: left;
    width: @picker_width + @num_cols;
    background:@popover-title-bg;

    // Offset the popover to account for the popover arrow
    &.top, &.topLeftCorner, &.topLeft, &.topRight, &.topRightCorner { margin-top: -@popover-arrow-width; }
    &.right, &.rightTop, &.rightBottom   { margin-left: @popover-arrow-width; }
    &.bottom, &.bottomRightCorner, &.bottomRight, &.bottomLeft, &.bottomLeftCorner  { margin-top: @popover-arrow-width; }
    &.left, &.leftBottom, &.leftTop    { margin-left: -@popover-arrow-width; }

    &.inline{
        > .arrow{
            display:none;
        }
        margin: 0 0 @base_spacing 0;
        position: relative;
        display:inline-block;
        opacity:1;
        top:auto;
        left:auto;
        bottom:auto;
        right:auto;
        max-width: 100%;
        box-shadow: none;
        z-index:auto;
        vertical-align: top;
    }
}

.dropdown-menu .iconpicker-popover.inline{
    margin:0;
    border:none;
}

.dropdown-menu.iconpicker-container{
    padding:0;
}

.iconpicker-popover.popover .popover-title {
    //padding: 8px 14px;
    //border-radius: 5px 5px 0 0;    
    padding:@base_spacing;
    font-size:@title_size;
    line-height:@title_size + 2px;
    border-bottom:1px solid darken(@popover-title-bg, 5%);
    background-color: @popover-title-bg;
    
    input[type=search].iconpicker-search{
        margin: 0 0 2px 0;
    }
}
.iconpicker-popover.popover .popover-title-text ~ input[type=search].iconpicker-search{
    margin-top: @base_spacing;
}

.iconpicker-popover.popover .popover-content {
    //padding: 9px 14px;
    padding:0px;
    text-align: center;
    //overflow:hidden;
}

.iconpicker-popover .popover-footer{
    .clearfix();
    float:none;
    clear:both;
    padding:@base_spacing;
    text-align:right;
    margin:0;
    border-top:1px solid darken(@popover-title-bg, 5%);
    background-color: @popover-title-bg;
    .iconpicker-btn{
        margin-left: 10px;
    }
    input[type=search].iconpicker-search{
        /*width:auto;
        float:left;*/
        margin-bottom: @base_spacing;
    }
}

// Arrows
//
// .arrow is outer, .arrow:after is inner

.iconpicker-popover.popover > .arrow {
    &,
    &:after {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
    }
}
.iconpicker-popover.popover > .arrow {
    border-width: @popover-arrow-outer-width;
}
.iconpicker-popover.popover > .arrow:after {
    border-width: @popover-arrow-width;
    content: "";
}

.iconpicker-popover.popover {
    &.top, &.topLeft, &.topRight{ 
        > .arrow {
            left: 50%;
            margin-left: -@popover-arrow-outer-width;
            border-bottom-width: 0;
            border-top-color: @popover-arrow-outer-fallback-color; // IE8 fallback
            border-top-color: @popover-arrow-outer-color;
            bottom: -@popover-arrow-outer-width;
            &:after {
                content: " ";
                bottom: 1px;
                margin-left: -@popover-arrow-width;
                border-bottom-width: 0;
                border-top-color: @popover-arrow-color;
            }
        }
    }
    &.topLeft > .arrow{
        left:@base_spacing;
        margin-left:0;
    }
    &.topRight > .arrow{
        left:auto;
        right:@base_spacing;
        margin-left:0;
    }
    &.right, &.rightTop, &.rightBottom{ 
        > .arrow {
            top: 50%;
            left: -@popover-arrow-outer-width;
            margin-top: -@popover-arrow-outer-width;
            border-left-width: 0;
            border-right-color: @popover-arrow-outer-fallback-color; // IE8 fallback
            border-right-color: @popover-arrow-outer-color;
            &:after {
                content: " ";
                left: 1px;
                bottom: -@popover-arrow-width;
                border-left-width: 0;
                border-right-color: @popover-arrow-color;
            }
        }
    }

    &.rightTop > .arrow{
        top:auto;
        bottom:@base_spacing;
        margin-top:0;
    }
    &.rightBottom > .arrow{
        top:@base_spacing;
        margin-top:0;
    }

    &.bottom, &.bottomRight, &.bottomLeft{ 
        > .arrow {
            left: 50%;
            margin-left: -@popover-arrow-outer-width;
            border-top-width: 0;
            border-bottom-color: @popover-arrow-outer-fallback-color; // IE8 fallback
            border-bottom-color: @popover-arrow-outer-color;
            top: -@popover-arrow-outer-width;
            &:after {
                content: " ";
                top: 1px;
                margin-left: -@popover-arrow-width;
                border-top-width: 0;
                border-bottom-color: @popover-arrow-color;
            }
        }
    }
    &.bottomLeft > .arrow{
        left:@base_spacing;
        margin-left:0;
    }
    &.bottomRight > .arrow{
        left:auto;
        right:@base_spacing;
        margin-left:0;
    }

    &.left, &.leftBottom, &.leftTop{ 
        > .arrow {
            top: 50%;
            right: -@popover-arrow-outer-width;
            margin-top: -@popover-arrow-outer-width;
            border-right-width: 0;
            border-left-color: @popover-arrow-outer-fallback-color; // IE8 fallback
            border-left-color: @popover-arrow-outer-color;
            &:after {
                content: " ";
                right: 1px;
                border-right-width: 0;
                border-left-color: @popover-arrow-color;
                bottom: -@popover-arrow-width;
            }
        }
    }

    &.leftBottom > .arrow{
        top:@base_spacing;
        margin-top:0;
    }
    &.leftTop > .arrow{
        top:auto;
        bottom:@base_spacing;
        margin-top:0;
    }
}