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

[data-role="option-selector"] {
    @include box_shadow (inset 0 2px 2px 0 #D5D5D5);
    width: 100%;
    height: auto;
    margin: 0 auto;
    border: 1px solid #C7C7C7;
    overflow: hidden;
    -webkit-transition: height 0.4s;
    transition: height 0.4s;
    margin-top: 15px;
    margin-bottom: 15px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    li {
        text-decoration: none;
        color: $text_color;
        display: block;
        height: 3rem;
        position: relative;
        line-height: 3rem;
        padding-left: 1rem;
        padding-right: 1.5rem;
        border: none;
        border-top: 1px solid #C7C7C7;
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;

        &.active:after{
            background: transparent url(../img/tick@30.png) no-repeat center center;
            background-size: 15px 15px;
            display: block;
            position: absolute;
            width: 2rem;
            height: 3rem;
            right: 0.5rem;
            content: "";
            top: 0;
        }

        &.closed:after {
            background: transparent url(../img/chevron_down@30.png) no-repeat center center;
            background-size: 15px 15px;
            display: block;
            position: absolute;
            width: 2rem;
            height: 3rem;
            right: 0.5rem;
            content: "";
            top: 0;
        }

        aside {
            float: left;
            margin: -1.2em 0 0 0;
            max-width: 100%;
            vertical-align: bottom;
            position: relative;
            top: 50%;
            z-index: 2;

            img {
                border-radius: 6px;
                margin-bottom: 0;
                float: left;
            }

            &:after {
                background: url(../img/ubuntushape_medium_radius_idle@18.png) no-repeat;
                background-size: 100% 100%;
                content: ' ';
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }

            & + p {
                padding-left: 1rem;
            }
        }

        p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border: none;
            display: block;
            color: $text_color;
            font-size: 0.9rem;
            padding-top: 0.5rem;
            line-height: 1rem;

            &:only-child,
            &:first-of-type:last-of-type {
                line-height: 2rem;
            }

            & + p {
                padding-top: 0.2rem;
                font-size: 0.7rem;
            }
        }
    }

    li:first-child {
        border-top: 0!important;
    }
}
