/*

* # Semantic - Dropdown
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributor
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/

/*******************************

Theme

*******************************/

@type : ‘module’; @element : ‘dropdown’;

@import ‘../../theme.config’;

/*******************************

Dropdown

*******************************/

.ui.dropdown {

cursor: pointer;
position: relative;
display: inline-block;
line-height: 1em;
tap-highlight-color: rgba(0, 0, 0, 0);
outline: none;
text-align: left;
transition: @transition;

}

/*******************************

Content

*******************************/

/*————–

Menu

—————*/

.ui.dropdown .menu {

cursor: auto;
position: absolute;
display: none;
outline: none;
top: 100%;
transition: @menuTransition;

margin: @menuMargin;
padding: @menuPadding;
background: @menuBackground;
min-width: 100%;

white-space: @menuWrap;
font-size: 1rem;
text-shadow: none;
text-align: @menuTextAlign;

box-shadow: @menuBoxShadow;
border: @menuBorder;
border-radius: @menuBorderRadius;
transition: @menuTransition;
z-index: @menuZIndex;
will-change: transform, opacity;

}

/*————–

Hidden Input

—————*/

.ui.dropdown > input, .ui.dropdown > select {

display: none !important;

}

/*————–

Dropdown Icon

—————*/

.ui.dropdown > .dropdown.icon {

width: auto;
margin: @dropdownIconMargin;

} .ui.dropdown .menu > .item .dropdown.icon {

width: auto;
float: @itemDropdownIconFloat;
margin: @itemDropdownIconMargin;

}

/*————–

Text

—————*/

.ui.dropdown > .text {

display: inline-block;
transition: @textTransition;

}

/*————–

Menu Item

—————*/

.ui.dropdown .menu > .item {

position: relative;
cursor: pointer;
display: block;
border: @itemBorder;
height: @itemHeight;

border-top: @itemDivider;
line-height: @itemLineHeight;
font-size: @itemFontSize;
color: @itemColor;

padding: @itemVerticalPadding @itemHorizontalPadding !important;
font-size: @itemFontSize;
text-transform: @itemTextTransform;
font-weight: @itemFontWeight;
box-shadow: @itemBoxShadow;
-webkit-touch-callout: none;

} .ui.dropdown .menu > .item:first-child {

border-top: none;

}

/*————–

Floated Content

—————*/

.ui.dropdown > .text > [class*=“right floated”], .ui.dropdown .menu .item > [class*=“right floated”] {

float: right;
margin-right: 0em;
margin-left: @floatedDistance;

} .ui.dropdown > .text > [class*=“left floated”], .ui.dropdown .menu .item > [class*=“left floated”] {

float: right;
margin-left: 0em;
margin-right: @floatedDistance;

}

.ui.dropdown .menu .item > .icon.floated, .ui.dropdown .menu .item > .flag.floated, .ui.dropdown .menu .item > .image.floated, .ui.dropdown .menu .item > img.floated {

margin-top: @itemLineHeightOffset;

}

/*————–

Menu Divider

—————*/

.ui.dropdown .menu > .header {

margin: @menuHeaderMargin;
padding: @menuHeaderPadding;
color: @menuHeaderColor;
font-size: @menuHeaderFontSize;
font-weight: @menuHeaderFontWeight;
text-transform: @menuHeaderTextTransform;

}

.ui.dropdown .menu > .divider {

border-top: @menuDividerBorder;
height: 0em;
margin: @menuDividerMargin;

}

.ui.dropdown .menu > .input {

margin: @menuInputMargin;
min-width: @menuInputMinWidth;

} .ui.dropdown .menu > .header + .input {

margin-top: 0em;

} .ui.dropdown .menu > .input:not(.transparent) input {

padding: @menuInputPadding;

} .ui.dropdown .menu > .input:not(.transparent) .button, .ui.dropdown .menu > .input:not(.transparent) .icon, .ui.dropdown .menu > .input:not(.transparent) .label {

padding-top: @menuInputVerticalPadding;
padding-bottom: @menuInputVerticalPadding;

}

/*—————–

Item Description

——————-*/

.ui.dropdown > .text > .description, .ui.dropdown .menu > .item > .description {

margin: @itemDescriptionMargin;
color: @itemDescriptionColor;

}

/*————–

Sub Menu

—————*/

.ui.dropdown .menu .menu {

top: @subMenuTop !important;
left: @subMenuLeft !important;
right: @subMenuRight !important;
margin: @subMenuMargin !important;
border-radius: @subMenuBorderRadius !important;
z-index: @subMenuZIndex !important;

}

/* Hide Arrow */ .ui.dropdown .menu .menu:after {

display: none;

}

/*******************************

Coupling

*******************************/

/*————–

Sub Elements

—————*/

/* Icons / Flags / Labels / Image */ .ui.dropdown > .text > .icon, .ui.dropdown > .text > .label, .ui.dropdown > .text > .flag, .ui.dropdown > .text > img, .ui.dropdown > .text > .image {

margin-top: @textLineHeightOffset;

} .ui.dropdown .menu > .item > .icon, .ui.dropdown .menu > .item > .label, .ui.dropdown .menu > .item > .flag, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img {

margin-top: @itemLineHeightOffset;

}

.ui.dropdown > .text > .icon, .ui.dropdown > .text > .label, .ui.dropdown > .text > .flag, .ui.dropdown > .text > img, .ui.dropdown > .text > .image, .ui.dropdown .menu > .item > .icon, .ui.dropdown .menu > .item > .label, .ui.dropdown .menu > .item > .flag, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img {

margin-left: 0em;
margin-right: @itemElementDistance;

}

/*————–

Image

—————*/

.ui.dropdown > .text > img, .ui.dropdown > .text > .image, .ui.dropdown .menu > .item > .image, .ui.dropdown .menu > .item > img {

display: inline-block;
vertical-align: middle;
width: auto;
max-height: @menuImageMaxHeight;

}

/*————–

Menu

—————*/

/* Remove Menu Item Divider */ .ui.dropdown .ui.menu > .item:before, .ui.menu .ui.dropdown .menu > .item:before {

display: none;

}

/* Prevent Menu Item Border */ .ui.menu .ui.dropdown .menu .active.item {

border-left: none;

}

/* Automatically float dropdown menu right on last menu item */ .ui.menu .right.menu .dropdown:last-child .menu, .ui.menu .right.dropdown.item .menu, .ui.buttons > .ui.dropdown:last-child .menu {

left: auto;
right: 0em;

}

/*————–

Button

—————*/

/* No Margin On Icon Button */ .ui.dropdown.icon.button > .dropdown.icon {

margin: 0em;

} .ui.dropdown.button:not(.pointing):not(.floating).active, .ui.dropdown.button:not(.pointing):not(.floating).visible {

border-bottom-left-radius: 0em;
border-bottom-right-radius: 0em;

}

/*******************************

Types

*******************************/

/*————–

Selection

—————*/

/* Displays like a select box */ .ui.selection.dropdown {

cursor: pointer;
word-wrap: break-word;
white-space: normal;
outline: 0;
transform: rotateZ(0deg);

min-width: @selectionMinWidth;

background: @selectionBackground;
display: @selectionDisplay;
padding: @selectionPadding;
color: @selectionTextColor;
box-shadow: @selectionBoxShadow;
border: @selectionBorder;
border-radius: @selectionBorderRadius;
transition: @selectionTransition;

} .ui.selection.dropdown.visible, .ui.selection.dropdown.active {

z-index: @selectionZIndex;

}

select.ui.dropdown {

height: 38px;
padding: 0em;
margin: 0em;
visibility: hidden;

} .ui.selection.dropdown > .text {

margin-right: @selectionTextIconDistance;

} .ui.selection.dropdown > .search.icon, .ui.selection.dropdown > .delete.icon, .ui.selection.dropdown > .dropdown.icon {

position: absolute;
top: auto;
margin: 0em;
width: auto;
right: @selectionHorizontalPadding;
opacity: @selectionIconOpacity;
transition: @selectionIconTransition;

}

/* Compact */ .ui.compact.selection.dropdown {

min-width:  0px;

}

/* Remove Selection */ .ui.selection.dropdown > .delete.icon {

opacity: 0.6;

} .ui.selection.dropdown > .delete.icon:hover {

opacity: 1;

}

/* Selection Menu */ .ui.selection.dropdown .menu {

overflow-x: hidden;
overflow-y: auto;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;
border-top: none !important;
width: auto;
margin: 0px -1px;
min-width: ~"calc(100% + 2px)";
outline: none;

box-shadow: @selectionMenuBoxShadow;
transition: @selectionMenuTransition;

} .ui.selection.dropdown .menu:after, .ui.selection.dropdown .menu:before {

display: none;

}

@media only screen and (max-width : @largestMobileScreen) {

.ui.selection.dropdown .menu {
  max-height: @selectionMobileMaxMenuHeight;
}

} @media only screen and (min-width: @tabletBreakpoint) {

.ui.selection.dropdown .menu {
  max-height: @selectionTabletMaxMenuHeight;
}

} @media only screen and (min-width: @computerBreakpoint) {

.ui.selection.dropdown .menu {
  max-height: @selectionComputerMaxMenuHeight;
}

} @media only screen and (min-width: @widescreenMonitorBreakpoint) {

.ui.selection.dropdown .menu {
  max-height: @selectionWidescreenMaxMenuHeight;
}

}

/* Menu Item */ .ui.selection.dropdown .menu > .item {

border-top: @selectionItemDivider;
padding-left: @selectionHorizontalPadding !important;
/* Add in spacing for scroll bar */
padding-right: calc(@selectionHorizontalPadding + 1em) !important;
white-space: normal;
word-wrap: normal;

}

/* Hover */ .ui.selection.dropdown:hover {

border-color: @selectionHoverBorderColor;
box-shadow: @selectionHoverBoxShadow;

}

/* Visible Hover */ .ui.selection.visible.dropdown:hover {

border-color: @selectionVisibleHoverBorderColor;
box-shadow: @selectionVisibleHoverBoxShadow;

} .ui.selection.visible.dropdown:hover .menu {

border: @selectionVisibleHoverMenuBorder;
box-shadow: @selectionVisibleHoverMenuBoxShadow;

}

/* Visible */ .ui.selection.dropdown.visible {

border-color: @selectionVisibleBorderColor;
box-shadow: @selectionVisibleBoxShadow;

} .ui.visible.selection.dropdown > .dropdown.icon {

opacity: @selectionVisibleIconOpacity;

}

/* Active Item */ .ui.selection.active.dropdown > .text:not(.default), .ui.selection.visible.dropdown > .text:not(.default) {

font-weight: @selectionVisibleTextFontWeight;
color: @selectionVisibleTextColor;

}

/* Connecting Border */ .ui.active.selection.dropdown, .ui.visible.selection.dropdown {

border-bottom-left-radius: @selectionVisibleConnectingBorder !important;
border-bottom-right-radius: @selectionVisibleConnectingBorder !important;

}

/*————–

Searchable

—————*/

/* Search Selection */ .ui.search.dropdown {

min-width: @searchMinWidth;

}

/* Search Dropdown */ .ui.search.dropdown > input.search {

cursor: pointer;
background: none transparent;
border: none;
box-shadow: none;
cursor: pointer;
position: absolute;
border-radius: 0em !important;
top: 0em;
left: 0em;
width: 100%;
outline: none;
-webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
padding: inherit; /*Amazing trick */

}

/* Search Selection */ .ui.search.selection.dropdown > input.search {

line-height: @searchSelectionLineHeight;

}

.ui.search.dropdown.active > input.search, .ui.search.dropdown.visible > input.search {

cursor: auto;

} .ui.active.search.dropdown > input.search:focus + .text {

color: @unselectedTextColor !important;

}

/* Search Menu */ .ui.search.dropdown .menu {

overflow-x: hidden;
overflow-y: auto;
backface-visibility: hidden;
-webkit-overflow-scrolling: touch;

} @media only screen and (max-width : @largestMobileScreen) {

.ui.search.dropdown .menu {
  max-height: @searchMobileMaxMenuHeight;
}

} @media only screen and (min-width: @tabletBreakpoint) {

.ui.search.dropdown .menu {
  max-height: @searchTabletMaxMenuHeight;
}

} @media only screen and (min-width: @computerBreakpoint) {

.ui.search.dropdown .menu {
  max-height: @searchComputerMaxMenuHeight;
}

} @media only screen and (min-width: @widescreenMonitorBreakpoint) {

.ui.search.dropdown .menu {
  max-height: @searchWidescreenMaxMenuHeight;
}

}

/*————–

Inline

—————*/

.ui.inline.dropdown {

cursor: pointer;
display: inline-block;
color: @inlineTextColor;

} .ui.inline.dropdown .dropdown.icon {

margin: @inlineIconMargin;
vertical-align: top;

} .ui.inline.dropdown > .text {

font-weight: @inlineTextFontWeight;

} .ui.inline.dropdown .menu {

cursor: auto;
margin-top: @inlineMenuDistance;
border-radius: @inlineMenuBorderRadius;

}

/*******************************

States

*******************************/

/*——————–

Hover

———————-*/

/* Menu Item Hover */ .ui.dropdown .menu > .item:hover {

background: @hoveredItemBackground;
color: @hoveredItemColor;
z-index: 12;

}

/*——————–

Active

———————-*/

/* Menu Item Active */ .ui.dropdown .menu .active.item {

background: @activeItemBackground;
font-weight: @activeItemFontWeight;
color: @activeItemColor;
box-shadow: @activeItemBoxShadow;
z-index: @activeItemZIndex;

}

/*——————–

Default Text

———————-*/

.ui.dropdown > .default.text, .ui.default.dropdown > .text {

color: @defaultTextColor;

} .ui.dropdown:hover > .default.text, .ui.default.dropdown:hover > .text {

color: @defaultTextHoverColor;

}

/*——————–

Loading

———————-*/

.ui.loading.dropdown > .text {

transition: none;

} .ui.dropdown > .loading.menu {

display: block;
visibility: hidden;
z-index: @loadingZIndex;

}

/*——————–

Keyboard Select

———————-*/

/* Selected Item */ .ui.dropdown.selected, .ui.dropdown .menu .selected.item {

background: @selectedBackground;
color: @selectedColor;

}

/*——————–

Search Filtered

———————-*/

/* Filtered Item */ .ui.dropdown > .filtered.text {

visibility: hidden;

} .ui.dropdown .filtered.item {

display: none;

}

/*——————–

Error

———————-*/

.ui.dropdown.error, .ui.dropdown.error > .text, .ui.dropdown.error > .default.text {

color: @errorTextColor;

}

.ui.selection.dropdown.error {

background: @errorBackgroundColor;
border-color: @errorBorderColor;

}

.ui.selection.dropdown.error:hover {

border-color: @errorBorderColor;

}

.ui.dropdown.error > .menu, .ui.dropdown.error > .menu .menu {

border-color: @errorBorderColor;

}

.ui.dropdown.error > .menu > .item {

color: @errorItemTextColor;

}

/* Item Hover */ .ui.dropdown.error > .menu > .item:hover {

background-color: @errorItemHoverBackground;

}

/* Item Active */ .ui.dropdown.error > .menu .active.item {

background-color: @errorItemActiveBackground;

}

/*******************************

Variations

*******************************/

/*————–

Direction

—————*/

/* Flyout Direction */ .ui.dropdown .menu {

left: 0px;

}

/* Default Side (Right) */ .ui.dropdown .right.menu > .menu, .ui.dropdown .menu .right.menu {

left: 100% !important;
right: auto !important;

}

/* Left Flyout Menu */ .ui.dropdown > .left.menu .menu, .ui.dropdown .menu .left.menu {

left: auto !important;
right: 100% !important;

}

.ui.dropdown .item .left.dropdown.icon, .ui.dropdown .left.menu .item .dropdown.icon {

width: auto;
float: @leftMenuDropdownIconFloat;
margin: @leftMenuDropdownIconMargin;

}

/*————–

Simple

—————*/

/* Displays without javascript */

.ui.simple.dropdown .menu:before, .ui.simple.dropdown .menu:after {

display: none;

} .ui.simple.dropdown .menu {

position: absolute;
display: block;
overflow: hidden;
top: -9999px !important;
opacity: 0;
width: 0;
height: 0;
transition: @simpleTransition;

}

.ui.simple.active.dropdown, .ui.simple.dropdown:hover {

border-bottom-left-radius: 0em !important;
border-bottom-right-radius: 0em !important;

}

.ui.simple.active.dropdown > .menu, .ui.simple.dropdown:hover > .menu {

overflow: visible;
width: auto;
height: auto;
top: 100% !important;
opacity: 1;

} .ui.simple.dropdown > .menu > .item:active > .menu, .ui.simple.dropdown:hover > .menu > .item:hover > .menu {

overflow: visible;
width: auto;
height: auto;
top: 0% !important;
left: 100% !important;
opacity: 1;

} .ui.simple.disabled.dropdown:hover .menu {

display: none;
height: 0px;
width: 0px;
overflow: hidden;

}

/* Visible */ .ui.simple.visible.dropdown > .menu {

display: block;

}

/*————–

Fluid

—————*/

.ui.fluid.dropdown {

display: block;
width: 100%;
min-width: 0em;

} .ui.fluid.dropdown > .dropdown.icon {

float: right;

}

/*————–

Floating

—————*/

.ui.floating.dropdown .menu {

left: 0;
right: auto;
box-shadow: @floatingMenuBoxShadow;
border-radius: @floatingMenuBorderRadius;

} .ui.floating.dropdown > .menu {

margin-top: @floatingMenuDistance !important;

}

/*————–

Pointing

—————*/

.ui.pointing.dropdown > .menu {

top: 100%;
margin-top: @pointingMenuDistance;
border-radius: @pointingMenuBorderRadius;

}

.ui.pointing.dropdown > .menu:after {

display: block;
position: absolute;
pointer-events: none;
content: '';
visibility: visible;
transform: rotate(45deg);

width: @pointingArrowSize;
height: @pointingArrowSize;
box-shadow: @pointingArrowBoxShadow;
background: @pointingArrowBackground;
z-index: @pointingArrowZIndex;

}

.ui.pointing.dropdown > .menu:after {

top: @pointingArrowOffset;
left: 50%;
margin: 0em 0em 0em @pointingArrowOffset;

}

/* Top Left Pointing */ .ui.top.left.pointing.dropdown > .menu {

top: 100%;
bottom: auto;
left: 0%;
right: auto;
margin: @pointingArrowDistanceFromEdge 0em 0em;

} .ui.top.left.pointing.dropdown > .menu {

top: 100%;
bottom: auto;
left: 0%;
right: auto;
margin: @pointingArrowDistanceFromEdge 0em 0em;

} .ui.top.left.pointing.dropdown > .menu:after {

top: @pointingArrowOffset;
left: @pointingArrowDistanceFromEdge;
right: auto;
margin: 0em;
transform: rotate(45deg);

} /* Top Right Pointing */ .ui.top.right.pointing.dropdown > .menu {

top: 100%;
bottom: auto;
right: 0%;
left: auto;
margin: @pointingArrowDistanceFromEdge 0em 0em;

} .ui.top.right.pointing.dropdown > .menu:after {

top: @pointingArrowOffset;
left: auto;
right: @pointingArrowDistanceFromEdge;
margin: 0em;
transform: rotate(45deg);

}

/* Left Pointing */ .ui.left.pointing.dropdown > .menu {

top: 0%;
left: 100%;
right: auto;
margin: 0em 0em 0em @pointingArrowDistanceFromEdge;

} .ui.left.pointing.dropdown > .menu:after {

top: 1em;
left: @pointingArrowOffset;
margin: 0em 0em 0em 0em;
transform: rotate(-45deg);

}

/* Right Pointing */ .ui.right.pointing.dropdown > .menu {

top: 0%;
left: auto;
right: 100%;
margin: 0em @pointingArrowDistanceFromEdge 0em 0em;

} .ui.right.pointing.dropdown > .menu:after {

top: 1em;
left: auto;
right: @pointingArrowOffset;
margin: 0em 0em 0em 0em;
transform: rotate(135deg);

}

/* Bottom Pointing */ .ui.bottom.pointing.dropdown > .menu {

top: auto;
bottom: 100%;
left: 0%;
right: auto;
margin: 0em 0em @pointingArrowDistanceFromEdge ;

} .ui.bottom.pointing.dropdown > .menu:after {

top: auto;
bottom: @pointingArrowOffset;
right: auto;
margin: 0em;
transform: rotate(-135deg);

} /* Reverse Sub-Menu Direction */ .ui.bottom.pointing.dropdown > .menu .menu {

top: auto !important;
bottom: 0px !important;

}

/* Bottom Left */ .ui.bottom.left.pointing.dropdown > .menu {

left: 0%;
right: auto;

} .ui.bottom.left.pointing.dropdown > .menu:after {

left: @pointingArrowDistanceFromEdge;
right: auto;

}

/* Bottom Right */ .ui.bottom.right.pointing.dropdown > .menu {

right: 0%;
left: auto;

} .ui.bottom.right.pointing.dropdown > .menu:after {

left: auto;
right: @pointingArrowDistanceFromEdge;

}

.loadUIOverrides();