/*
 * This file is subject to the terms and conditions defined in
 * file 'LICENSE.txt', which is part of this source code package.
 *//* 
    Created on : 28.02.2019, 10:14:38
    Author     : Oliver
*/

.dropdown{
    position:relative;
    box-shadow:rgba(0,0,0,0.2) 0.2mm 0.2mm 0.4mm;
    border-bottom:0.1mm solid #eee;
    border-radius:2mm;
    box-sizing:border-box;
    background-color:#eee;
}

.dropdown:not([data-expanded="true"]):hover{
    cursor:pointer;
}

.dropdown > button.arrow{
    position:absolute;
    display:block;
    top:-0.06em;
    right:0;
    width:1cm;
    margin:0;
    pointer-events:none;
    background:transparent;
    box-shadow:none;
    color:#555;
    height:1cm;
    border-radius:2mm;
    border:none;
    font-weight:bold;
    vertical-align:top;
}

.dropdown > button.arrow::before{
    content:'';
    display:inline-block;
    position:relative;
    margin-top:30%;
    width: 0; 
    height: 0; 
    border-left: 1.5mm solid transparent;
    border-right: 1.5mm solid transparent;

    border-top: 1.5mm solid black;
}

.dropdown:hover{
    background-color:#f4f4f4;
}

.dropdown:hover > button.arrow::before{
    border-top: 1.5mm solid #555;
}

.dropdown > .options > .option:hover{
    color:#555;
    cursor:pointer;
}

.dropdown > .options > .option[data-disabled="true"]{
    pointer-events:none;
    color:#888;
}

.dropdown > .options > .option[data-disabled="true"]:hover{
    cursor:default;
}

.dropdown > .options{
    width:100%;
    overflow-y:hidden;
    max-height:100%;
}

.dropdown[data-expanded="true"]{
    box-shadow:none;
    z-index:999;
}

.dropdown[data-expanded="true"] > button.arrow{
    display:none;
}

.dropdown:not([data-expanded="true"]) > .options > .option{
    pointer-events:none;
}

.dropdown[data-expanded="true"] > .options{
    max-height:8cm;
    overflow-y:auto;
    background-color:#eee;
    border-radius:2mm;
    box-shadow:rgba(0,0,0,0.2) 0.4mm 0.4mm 0.8mm;
}

.dropdown[data-expanded="true"] > .options > div{
    display:block;
}

.dropdown[data-expanded="true"] > .options > div[data-selected="true"]{
    border-left:1mm solid #2c6bb0;
}

.dropdown > .options > div{
    height:1cm;
    display:block;
    padding:0.2cm 0.25cm;
    box-sizing:border-box;
    display:none;
    user-select:none;
    -moz-user-select:none;
}

.dropdown > .options > div[data-selected="true"]{
    display:block;
}