/*
 * Copyright (C) 2013 Adnane Belmadiaf <daker@ubuntu.com>
 * License granted by Canonical Limited
 *
 * This file is part of ubuntu-html5-ui-toolkit.
 *
 * This package is free software; you can redistribute it and/or modify
 * it under the terms of the GNU Lesser General Public License as
 * published by the Free Software Foundation; either version 3 of the
 * License, or
 * (at your option) any later version.

 * This package is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.

 * You should have received a copy of the GNU Lesser General Public
 * License along with this program. If not, see
 * <http://www.gnu.org/licenses/>.
 */

.popover {
    @include box_shadow (0 0 10px rgba(0, 0, 0, 0.5));
    position: absolute;
    background: rgba(255, 255, 255, 0.98);
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -webkit-background-clip: padding-box;
    z-index: 110;
    width: 320px;
    left: 0;
    top: 0;
    color: $text_color;
    font-size: 1rem;
    display: none;

    &.active {
        display: block;
    }

    .list {
        -webkit-border-radius: 15px;
        border-radius: 15px;
        width: auto;
        max-height: 250px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;

        li {
            position: relative;
            padding: 20px 10px 20px 10px;
            border-bottom: 1px solid #d9d9d9;
            text-align: center;
            font-size: 1rem;

            a {
                color: $text_color;
                text-decoration: none;
            }

            &.active {
                background: #ebebeb;
                border-top: 1px solid #fcfcfc;

                a {
                    color: $ubuntu_orange;
                    text-decoration: none;
                }
            }
        }
    }
}

/* Caret */
.popover[data-gravity]:before,
.popover[data-gravity]:after {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    content: '';
}

.popover[data-gravity="n"]:before {
    top: -17px;
    margin-left: -18px;
    background: transparent url(../img/UpArrow@18.png) no-repeat 0.5rem 0.5rem;
    background-size: 50% 50%;
    width: 37px;
    height: 18px;
}

.popover[data-gravity="w"]:before {
    top: 50%;
    margin-left: -17px;
    margin-top: -18px;
    background: transparent url(../img/LeftArrow@18.png) no-repeat 0.5rem 0.5rem;
    background-size: 50% 50%;
    width: 18px;
    height: 37px;
    left: 0;
}

.popover[data-gravity="s"]:after {
    bottom: -9px;
    margin-left: -18px;
    background: transparent url(../img/DownArrow@18.png) no-repeat 0.5rem 0.5rem;
    background-size: 50% 50%;
    width: 37px;
    height: 18px;
}

.popover[data-gravity="e"]:before {
    top: 50%;
    margin-right: -10px;
    margin-top: -18px;
    background: transparent url(../img/RightArrow@18.png) no-repeat 0.5rem 0.5rem;
    background-size: 50% 50%;
    width: 18px;
    height: 37px;
    right: 0;
    left: initial;
}