// 
// Drop-down block
//



//
//  Common
//  _____________________________________________

& when (@media-common = true) {



.dropdown-block {
    position: relative;
}
.dropdown-block:hover {
    z-index: 10;
}


/* Dropdown heading
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.dropdown-block .dropdown-heading {
    display: inline-block;
    line-height: 36px;
    max-height: 36px; /* Set static height to improve layout of inline elements inisde the dropdown heading */

    // Important: add pointer cursor to dropdown heading to make
    // the dropdown a clickable element on touch screens (iOS)
    cursor: pointer;
}

/* In case a link ("a" tag) is used as a dropdown heading */
.dropdown-block a.dropdown-heading {
    /* Inherit color to have the same color as the text in the containing section (e.g. in primary header). */
    color: inherit;

    /* Remove transition */
    transition: none;
    transition-delay: unset;
}
.dropdown-block a.dropdown-heading:hover {
    /* Inherit color to have the same color as the text in the containing section (e.g. in primary header). 
       Otherwise the dropdown heading on hover would blink showing standard link hover color. */
    /* TODO: temporarily removed. It gives oposite effect when dropdown placed inside the top menu. */
    /* color: inherit; */
}

/* Inside dropdown heading
-------------------------------------------------------------- */
.dropdown-block .dropdown-heading .label.hide {
    display: none;
}

/* Child elements of the heading have to be aligned vertically */
.dropdown-block .dropdown-heading > * {
    display: inline-block;
    vertical-align: middle;
}

/* If heading has additional inner wrapper (to cover the shadow of the dropdown),
   properties of that element needs to be reset (e.g. element shouldn't be "inline-block") */
.dropdown-block .dropdown-heading.cover > span,
.dropdown-block .dropdown-heading.cover > div {
    display: block;
    vertical-align: baseline;

    // Reset default cursor to cover the one applied to dropdown heading element
    cursor: default;
}
.dropdown-block .dropdown-heading.cover > span > *,
.dropdown-block .dropdown-heading.cover > div > * {
    display: inline-block;
    vertical-align: middle;
}

/* Elements of the dropdown heading */
.dropdown-block .dropdown-heading .caret,
.dropdown-block .dropdown-heading .caret {
    margin-right: -3px;
}
.dropdown-block .dropdown-heading .value {
    margin-left: 2px;
}

/* e.g. for flags */
.dropdown-block .dropdown-heading .dropdown-icon {
    width: 18px;
    text-indent: -9999px;
    background-position: 0 50%;
    background-repeat: no-repeat;
}


/* Cover shadow of "dropdown-heading" and "dropdown-content"
   with additional div inside the heading
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.dropdown-block .dropdown-heading.cover > span,
.dropdown-block .dropdown-heading.cover > div {
    padding: 0 10px;
}
.dropdown-block.open > .dropdown-heading.cover > span,
.dropdown-block.open > .dropdown-heading.cover > div {
    background-color: #fff;
    z-index: 11; /* Important: higher than dropdown */
    position: relative;
}

// // When opened, replace caret with "close" icon
// .dropdown-block.open > .dropdown-heading.cover .caret:before {
//     content: "\e20f";
//     opacity: 0.6;
// }


/* Dropdown content
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
.dropdown-block .dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    margin: 0;
    min-width: 130px;
    line-height: 1.5em;
    text-align: left;
    list-style: none;
    background-color: #fff;
}
.dropdown-block .dropdown-content.left-hand {
    left: auto;
    right: 0;
}


/* When dropdown content is an unordered list
-------------------------------------------------------------- */
/* Everything is inline-block, except links */
.dropdown-block {
    .dropdown-content > li {
        white-space: nowrap;
        margin: 0;
    }
    .dropdown-content > li * {
        display: inline-block;
    }
    .dropdown-content > li > a {
        display: block;
    }
    .dropdown-content > li .label {
        margin-right: 8px;
    }
    .dropdown-content .dropdown-icon {
        width:18px;
        text-indent:-9999px;
        background-position:0 50%;
        background-repeat:no-repeat;
    }
}



} /* end: media-common */



//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {

    .dropdown-block {
        .dropdown-content {
            padding: 10px 20px;
            > li > a {
                padding-top: 10px;
                padding-bottom: 10px;
            }
        }
    }

}



//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

    .dropdown-block {
        .dropdown-content {
            padding: 15px 20px;
            > li > a {
                padding-top: 5px;
                padding-bottom: 5px;
            }
        }
    }

}



//
//  Large desktop
//  ---------------------------------------------

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {

    .dropdown-block {
        .dropdown-content {
            padding: 20px 25px;
            > li > a {
                padding-top: 0px;
                padding-bottom: 1px;
            }
        }
    }

}
