/*
 * Copyright (c) 2016-2018 dunnhumby Germany GmbH.
 * All rights reserved.
 *
 * This source code is licensed under the MIT license found in the LICENSE file
 * in the root directory of this source tree.
 *
 */

.flounder--wrapper
{
    display:                        inline-block;
    text-align:                     left;
    width:                          18rem;
}


.flounder
{
    border:                         1px solid;
    box-sizing:                     border-box;
    cursor:                         pointer;
    position:                       relative;
}


.flounder__arrow--wrapper
{
    background-color:               transparent;
    height:                         100%;
    pointer-events:                 none;
    position:                       absolute;
    right:                          0;
    top:                            0;
    width:                          30px;
}


.flounder__arrow--inner
{
    border-left:                    4px solid transparent;
    border-right:                   4px solid transparent;
    border-top:                     7px solid #000000;
    height:                         0;
    margin-top:                     11px;
    pointer-events:                 none;
    position:                       absolute;
    right:                          10px;
    width:                          0;
}


div:hover ~ .flounder__arrow--wrapper,
div:hover ~ .flounder__arrow--wrapper,
input:hover ~ .flounder__arrow--wrapper,
div:focus ~ .flounder__arrow--wrapper,
input:focus ~ .flounder__arrow--wrapper
{
    background-color:               #eeeeee;
}


div:active ~ .flounder__arrow--wrapper,
input:active ~ .flounder__arrow--wrapper
{
    background-color:               #cccccc;
}


.flounder__list--wrapper
{
    background-color:               #ffffff;
    border:                         1px solid;
    border-bottom-right-radius:     0;
    border-top-right-radius:        0;
    display:                        block;
    left:                           -1px;
    max-height:                     200px;
    overflow-x:                     hidden;
    position:                       absolute;
    width:                          100%;
    z-index:                        800;
}


/* -------------------------------------------------------------------------- */
/* FLOUNDER - option                                                          */
/* -------------------------------------------------------------------------- */
.flounder__option--selected--displayed
{
    border-bottom-right-radius:     0;
    border-top-right-radius:        0;
    box-sizing:                     border-box;
    cursor:                         pointer;
    display:                        inline-block;
    height:                         30px;
    line-height:                    2em;
    overflow:                       hidden;
    padding-left:                   3px;
    padding-right:                  35px;
    text-indent:                    0.5em;
    text-overflow:                  ellipsis;
    vertical-align:                 middle;
    white-space:                    nowrap;
    width:                          100%;
    z-index:                        -1;
}


.flounder__option
{
    color:                          #000000;
    padding:                        8px 10px 7px;
}


.flounder__hover
{
    background-color:               #eeeeee;
}


.flounder__option--selected
{
    background-color:               #cccccc;
}


.flounder__option--selected.flounder__hover
{
    background-color:               #aaaaaa;
    color:                          #cccccc;
}


.flounder__option--description
{
    color:                          #aaaaaa;
    font-size:                      0.7em;
    font-weight:                    200;
}


.flounder__hover > .flounder__option--description
{
    color:                          #eeeeee;
}


/* -------------------------------------------------------------------------- */
/* FLOUNDER - sections                                                        */
/* -------------------------------------------------------------------------- */
.flounder__section,
.flounder__header
{
    cursor:                         auto;
    pointer-events:                 none;
}

.flounder__section
{
    border:                         1px solid #dddddd;
    margin:                         5px 0 3px 2px;
    padding-top:                    2px;
    text-indent:                    5px;
}


.flounder__header
{
    color:                          #777777;
}


.flounder__section .flounder__option
{
    cursor:                         pointer;
    pointer-events:                 auto;
}


/* -------------------------------------------------------------------------- */
/* FLOUNDER - hover                                                           */
/* -------------------------------------------------------------------------- */
.flounder:hover,
:hover > .flounder__list--wrapper
{
    z-index:                        799;
}


/* -------------------------------------------------------------------------- */
/* FLOUNDER - open                                                            */
/* -------------------------------------------------------------------------- */
.open .flounder
{
    z-index:                        800;
}


.open .flounder__option--selected--displayed
{
    background-color:               #ffffff;
    border-bottom:                  none;
    border-bottom-left-radius:      none;
    border-bottom-right-radius:     none;
}


/* -------------------------------------------------------------------------- */
/* FLOUNDER - search                                                          */
/* -------------------------------------------------------------------------- */
.flounder__input--search
{
    background-color:               transparent;
    border:                         none;
    box-sizing:                     border-box;
    display:                        inline-block;
    height:                         26px;
    padding:                        0;
    text-indent:                    8px;
    z-index:                        1;
}

.flounder > .flounder__input--search
{
    box-sizing:                     border-box;
    height:                         100%;
    left:                           0;
    position:                       absolute;
    top:                            0;
    width:                          100%;
}

.flounder__input--search:focus
{
    outline:                        none;
}


/* -------------------------------------------------------------------------- */
/* FLOUNDER - hidden classes select                                           */
/* -------------------------------------------------------------------------- */
.flounder__option--selected--hidden
{
    display:                        none;
}


.flounder--hidden--ios
{
    height:                         1px;
    opacity:                        0;
    position:                       absolute;
    top:                            0;
    width:                          1px;
}


.flounder--hidden
{
    left:                           -999999px;
    position:                       absolute;
}

.flounder--search--hidden
{
    display:                        none;
}


.flounder__disabled
{
    border-color:                   #cccccc;
    color:                          #cccccc;
    cursor:                         auto;
    pointer-events:                 none;
}


/* -------------------------------------------------------------------------- */
/* FLOUNDER - multi select                                                    */
/* -------------------------------------------------------------------------- */
.flounder--multiple .flounder__option--selected--displayed
{
    position:                       absolute;
}


.flounder__multiple__tag__close
{
    background-image:               url( "data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%2213%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%20fill%3D%22%23D2D7D9%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M9%203H8v1H7v1H6V4H5V3H3v2h1v1h1v1H4v1H3v2h2V9h1V8h1v1h1v1h2V8H9V7H8V6h1V5h1V3z%22%2F%3E%3C%2Fsvg%3E" );
    background-repeat:              no-repeat;
    cursor:                         pointer;
    display:                        inline-block;
    height:                         13px;
    left:                           -2px;
    position:                       relative;
    top:                            3px;
    width:                          12px;
}


.flounder__multiple__tag__close:hover,
div:hover > .flounder__multiple__tag__close,
div:focus > .flounder__multiple__tag__close
{
    background-image:               url( "data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%2213%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%20fill%3D%22%23279BC8%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M9%203H8v1H7v1H6V4H5V3H3v2h1v1h1v1H4v1H3v2h2V9h1V8h1v1h1v1h2V8H9V7H8V6h1V5h1V3z%22%2F%3E%3C%2Fsvg%3E" );
}


.flounder__multi--tag--list
{
    margin-top:                     1px;
    min-height:                     30px;
}


.flounder__multiple--select--tag
{
    border:                         1px solid;
    border-radius:                  3px;
    display:                        inline-block;
    margin-left:                    2px;
    margin-right:                   4px;
    padding:                        4px 5px;
    position:                       relative;
    user-select:                    none;
    z-index:                        2;
}


.flounder__multiple--select--tag:nth-last-child( 2 )
{
    margin-right:                   0;
}

/* -------------------------------------------------------------------------- */
/* FLOUNDER - description                                                     */
/* -------------------------------------------------------------------------- */
.flounder__option > span,
.flounder__option > div
{
    pointer-events:                 none;
}


/* -------------------------------------------------------------------------- */
/* FLOUNDER - loading                                                     */
/* -------------------------------------------------------------------------- */

@keyframes loading
{

    0%
    {
        content:                    "Loading.";
    }

    33%
    {
        content:                    "Loading..";
    }

    66%
    {
        content:                    "Loading...";
    }
}


.flounder__loading,
.flounder__loading--failed
{
    color:                          #777777;
    display:                        flex;
    min-height:                     1em;
    pointer-events:                 none;
}


.flounder__loading:after
{
    animation:                      loading 1s infinite;
    content:                        "Loading";
    display:                        block;
}


.flounder__loading--failed:after
{
    content:                        "Data load failed";
    display:                        block;
}


.flounder__no-results
{
    cursor:                         initial;
}