/*
 * 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/>.
 */


.has_actions {
    top: 65px!important;
    left: 10px!important;
    right: 10px;

    li {
        text-align: left!important;
        padding-left: 45px!important;
        cursor: pointer;
        background: transparent no-repeat center left;
        background-size: 25px;
        background-position-x: 10px;
    }

    &:before {
        right: 5px;
        left: auto!important;
    }
}

.popover,
[data-role="popover"] {
    @include box_shadow (0 0 2px 0 rgba(0, 0, 0, 0.3));
    position: absolute;
    background: rgba(255, 255, 255, 0.98);
    -webkit-border-radius: 8px;
    border-radius: 8px;
    z-index: 110;
    left: 0;
    top: 0;
    color: $text_color;
    font-size: 1rem;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scaleY(0.0);
    transform: scaleY(0.0);
    -webkit-transition: -webkit-transform 0.1s;
    transition: transform 0.1s;

    &.active {
        visibility: visible;
        opacity: 1;
        -webkit-transform: scaleY(1.0);
        transform: scaleY(1.0);
    }

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

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

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

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

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

            &:only-child {
                border-bottom: 0;
            }
        }
    }
}

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

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

.popover[data-gravity="w"]:before,
[data-role="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,
[data-role="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,
[data-role="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;
}

.has_tabs {
    top: 65px;
    left: 10px;
    right: 10px;

    li {
        text-align: left!important;
        padding-left: 20px!important;
        cursor: pointer;
    }

    &:before {
        left: 30px!important;
    }
}

/* Tablet */
@media only screen and (min-width: 870px){
    .popover,
    [data-role="popover"] {
        width: 320px;
    }

    .has_actions {
        left: auto!important;
        right: 10px!important;
    }
}