// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */

//
// Dropdowns
// _____________________________________________

//
// Simple dropdown
// ---------------------------------------------

.lib-dropdown(
@_toggle-selector : ~".action.toggle",
@_options-selector : ~"ul.dropdown",

@_dropdown-actions-padding: @dropdown-actions__padding,
@_dropdown-list-min-width: @dropdown-list__min-width,
@_dropdown-list-width: @dropdown-list__width,
@_dropdown-list-height: @dropdown-list__height,
@_dropdown-list-margin-top: @dropdown-list__margin-top,
@_dropdown-list-position-top: @dropdown-list__position-top,
@_dropdown-list-position-bottom: @dropdown-list__position-bottom,
@_dropdown-list-position-left: @dropdown-list__position-left,
@_dropdown-list-position-right: @dropdown-list__position-right,
@_dropdown-list-background: @dropdown-list__background,
@_dropdown-list-border: @dropdown-list__border,
@_dropdown-list-pointer: @dropdown-list__pointer,
@_dropdown-list-pointer-border: @dropdown-list-pointer__border,
@_dropdown-list-pointer-position: @dropdown-list-pointer__position,
@_dropdown-list-pointer-position-top: @dropdown-list-pointer__position-top,
@_dropdown-list-pointer-position-left-right: @dropdown-list-pointer__position-left-right,
@_dropdown-list-item-border: @dropdown-list-item__border,
@_dropdown-list-item-padding: @dropdown-list-item__padding,
@_dropdown-list-item-margin: @dropdown-list-item__margin,
@_dropdown-list-item-hover: @dropdown-list-item__hover,
@_dropdown-list-shadow: @dropdown-list__shadow,
@_dropdown-list-z-index: @dropdown-list__z-index,

@_dropdown-toggle-icon-content: @dropdown-toggle-icon__content,
@_dropdown-toggle-active-icon-content: @dropdown-toggle-icon__active__content,

@_icon-font: @dropdown-toggle-icon__font,
@_icon-font-size: @dropdown-toggle-icon__font-size,
@_icon-font-line-height: @dropdown-toggle-icon__font-line-height,
@_icon-font-color: @dropdown-toggle-icon__font-color,
@_icon-font-color-hover: @dropdown-toggle-icon__font-color-hover,
@_icon-font-color-active: @dropdown-toggle-icon__font-color-active,
@_icon-font-margin: @dropdown-toggle-icon__font-margin,
@_icon-font-position: @dropdown-toggle-icon__position,
@_icon-font-vertical-align: @dropdown-toggle-icon__font-vertical-align,
@_icon-font-text-hide: @dropdown-toggle-icon__text-hide
) {
.lib-clearfix();
display: inline-block;
position: relative;

@{_toggle-selector} {
.lib-css(padding, @_dropdown-actions-padding);
cursor: pointer;

._lib-dropdown-icon(
@_dropdown-toggle-icon-content,
@_dropdown-toggle-active-icon-content,
@_icon-font,
@_icon-font-size,
@_icon-font-line-height,
@_icon-font-color,
@_icon-font-color-hover,
@_icon-font-color-active,
@_icon-font-margin,
@_icon-font-vertical-align,
@_icon-font-position,
@_icon-font-text-hide
);
}

._lib-dropdown-styles(
@_options-selector: @_options-selector,
@_dropdown-list-min-width,
@_dropdown-list-width,
@_dropdown-list-height,
@_dropdown-list-margin-top,
@_dropdown-list-background,
@_dropdown-list-border,
@_dropdown-list-z-index,
@_dropdown-list-shadow,
@_dropdown-list-item-padding,
@_dropdown-list-item-margin,
@_dropdown-list-item-border,
@_dropdown-list-item-hover,
@_dropdown-list-position-top,
@_dropdown-list-position-bottom,
@_dropdown-list-position-left,
@_dropdown-list-position-right,
@_dropdown-list-pointer,
@_dropdown-list-pointer-border,
@_dropdown-list-pointer-position,
@_dropdown-list-pointer-position-top,
@_dropdown-list-pointer-position-left-right
);
}

//
// Split dropdown
// ---------------------------------------------

.lib-dropdown-split(
@_toggle-selector : ~".action.toggle",
@_options-selector : ~"ul.dropdown",
@_button-selector : ~".action.split",

@_dropdown-split-actions-padding: @dropdown-split-actions__padding,
@_dropdown-split-button-actions-padding: @dropdown-split-button__actions__padding,
@_dropdown-split-toggle-actions-padding: @dropdown-split-toggle__actions__padding,
@_dropdown-split-toggle-position: @dropdown-split-toggle__position,
@_dropdown-split-list-min-width: @dropdown-split-list__min-width,
@_dropdown-split-list-width: @dropdown-split-list__width,
@_dropdown-split-list-height: @dropdown-split-list__height,
@_dropdown-split-list-margin-top: @dropdown-split-list__margin-top,
@_dropdown-split-list-position-top: @dropdown-split-list__position-top,
@_dropdown-split-list-position-bottom: @dropdown-split-list__position-bottom,
@_dropdown-split-list-position-left: @dropdown-split-list__position-left,
@_dropdown-split-list-position-right: @dropdown-split-list__position-right,
@_dropdown-split-list-background: @dropdown-split-list__background,
@_dropdown-split-list-border: @dropdown-split-list__border,
@_dropdown-split-list-pointer: @dropdown-split-list__pointer,
@_dropdown-split-list-pointer-border: @dropdown-split-list__pointer-border,
@_dropdown-split-list-pointer-position: @dropdown-split-list__pointer-position,
@_dropdown-split-list-pointer-position-top: @dropdown-split-list__pointer-position-top,
@_dropdown-split-list-pointer-position-left-right: @dropdown-split-list__pointer-position-left-right,
@_dropdown-split-list-item-border: @dropdown-split-list__item-border,
@_dropdown-split-list-item-padding: @dropdown-split-list__item-padding,
@_dropdown-split-list-item-margin: @dropdown-split-list__item-margin,
@_dropdown-split-list-item-hover: @dropdown-split-list__item-hover,
@_dropdown-split-button-border-radius-fix: @dropdown-split-button__border-radius-fix,
@_dropdown-split-list-shadow: @dropdown-split-list__shadow,
@_dropdown-split-list-z-index: @dropdown-split-list__z-index,

@_dropdown-split-toggle-icon-content: @dropdown-split-toggle-icon__content,
@_dropdown-split-toggle-active-icon-content: @dropdown-split-toggle-icon__active__content,

@_icon-font: @dropdown-split-toggle-icon__font,
@_icon-font-size: @dropdown-split-toggle-icon__font-size,
@_icon-font-line-height: @dropdown-split-toggle-icon__font-line-height,
@_icon-font-color: @dropdown-split-toggle-icon__font-color,
@_icon-font-color-hover: @dropdown-split-toggle-icon__font-color-hover,
@_icon-font-color-active: @dropdown-split-toggle-icon__font-color-active,
@_icon-font-margin: @dropdown-split-toggle-icon__font-margin,
@_icon-font-vertical-align: @dropdown-split-toggle-icon__font-vertical-align,
@_icon-font-position: @dropdown-split-toggle-icon__position,
@_icon-font-text-hide: @dropdown-split-toggle-icon__text-hide
) {
.lib-clearfix();
display: inline-block;
position: relative;

._lib-dropdown-split-toggle-position(
@_button-selector,
@_toggle-selector,
@_dropdown-split-toggle-position,
@_dropdown-split-button-border-radius-fix
);

@{_button-selector} {
.lib-css(padding, @_dropdown-split-button-actions-padding);
}

@{_toggle-selector} {
.lib-css(padding, @_dropdown-split-toggle-actions-padding);
._lib-dropdown-split-icon(
@_dropdown-split-toggle-icon-content,
@_dropdown-split-toggle-active-icon-content,
@_icon-font,
@_icon-font-size,
@_icon-font-line-height,
@_icon-font-color,
@_icon-font-color-hover,
@_icon-font-color-active,
@_icon-font-margin,
@_icon-font-vertical-align,
@_icon-font-position,
@_icon-font-text-hide
);
}

._lib-dropdown-styles(
@_options-selector: @_options-selector,
@_dropdown-split-list-min-width,
@_dropdown-split-list-width,
@_dropdown-split-list-height,
@_dropdown-split-list-margin-top,
@_dropdown-split-list-background,
@_dropdown-split-list-border,
@_dropdown-split-list-z-index,
@_dropdown-split-list-shadow,
@_dropdown-split-list-item-padding,
@_dropdown-split-list-item-margin,
@_dropdown-split-list-item-border,
@_dropdown-split-list-item-hover,
@_dropdown-split-list-position-top,
@_dropdown-split-list-position-bottom,
@_dropdown-split-list-position-left,
@_dropdown-split-list-position-right,
@_dropdown-split-list-pointer,
@_dropdown-split-list-pointer-border,
@_dropdown-split-list-pointer-position,
@_dropdown-split-list-pointer-position-top,
@_dropdown-split-list-pointer-position-left-right
);
}

//
// Internal use mixins
// ---------------------------------------------

._lib-dropdown-styles(
@_options-selector,
@_dropdown-list-min-width,
@_dropdown-list-width,
@_dropdown-list-height,
@_dropdown-list-margin-top,
@_dropdown-list-background,
@_dropdown-list-border,
@_dropdown-list-z-index,
@_dropdown-list-shadow,
@_dropdown-list-item-padding,
@_dropdown-list-item-margin,
@_dropdown-list-item-border,
@_dropdown-list-item-hover,
@_dropdown-list-position-top,
@_dropdown-list-position-bottom,
@_dropdown-list-position-left,
@_dropdown-list-position-right,
@_dropdown-list-pointer,
@_dropdown-list-pointer-border,
@_dropdown-list-pointer-position,
@_dropdown-list-pointer-position-top,
@_dropdown-list-pointer-position-left-right
) {
@{_options-selector} {
.lib-list-reset-styles();
.lib-css(background, @_dropdown-list-background);
.lib-css(border, @_dropdown-list-border);
.lib-css(height, @_dropdown-list-height);
.lib-css(margin-top, @_dropdown-list-margin-top);
.lib-css(min-width, @_dropdown-list-min-width);
.lib-css(width, @_dropdown-list-width);
.lib-css(z-index, @_dropdown-list-z-index);
box-sizing: border-box;
display: none;
position: absolute;

._lib-dropdown-list-position(
@_dropdown-list-position-top,
@_dropdown-list-position-bottom,
@_dropdown-list-position-left,
@_dropdown-list-position-right
);

._lib-dropdown-list-shadow(@_dropdown-list-shadow);

li {
.lib-css(margin, @_dropdown-list-item-margin);
.lib-css(padding, @_dropdown-list-item-padding);

._lib-dropdown-list-item-border(
@_dropdown-list-item-border
);

&:hover {
.lib-css(background, @_dropdown-list-item-hover);
cursor: pointer;
}
}

._lib-dropdown-list-pointer(
@_dropdown-list-background,
@_dropdown-list-pointer-border,
@_dropdown-list-pointer-position,
@_dropdown-list-pointer-position-top,
@_dropdown-list-pointer-position-left-right
);
}

&.active {
overflow: visible;

@{_options-selector} {
display: block;
}
}
}

//
// Dropdown list position
// ---------------------------------------------

._lib-dropdown-list-position(
@_dropdown-list-position-top,
@_dropdown-list-position-bottom,
@_dropdown-list-position-left,
@_dropdown-list-position-right
) when not (@_dropdown-list-position-top = false) and not (@_dropdown-list-position-top = auto) {
.lib-css(top, @_dropdown-list-position-top);
}

._lib-dropdown-list-position(
@_dropdown-list-position-top,
@_dropdown-list-position-bottom,
@_dropdown-list-position-left,
@_dropdown-list-position-right
) when not (@_dropdown-list-position-bottom = false) and not (@_dropdown-list-position-bottom = auto) {
.lib-css(bottom, @_dropdown-list-position-bottom);
}

._lib-dropdown-list-position(
@_dropdown-list-position-top,
@_dropdown-list-position-bottom,
@_dropdown-list-position-left,
@_dropdown-list-position-right
) when not (@_dropdown-list-position-left = false) and not (@_dropdown-list-position-left = auto) {
.lib-css(left, @_dropdown-list-position-left);
}

._lib-dropdown-list-position(
@_dropdown-list-position-top,
@_dropdown-list-position-bottom,
@_dropdown-list-position-left,
@_dropdown-list-position-right
) when not (@_dropdown-list-position-right = false) and not (@_dropdown-list-position-right = auto) {
.lib-css(right, @_dropdown-list-position-right);
}

//
// Simple dropdown icon
// ---------------------------------------------

._lib-dropdown-icon(
@_dropdown-toggle-icon-content,
@_dropdown-toggle-active-icon-content,
@_icon-font,
@_icon-font-size,
@_icon-font-line-height,
@_icon-font-color,
@_icon-font-color-hover,
@_icon-font-color-active,
@_icon-font-margin,
@_icon-font-vertical-align,
@_icon-font-position,
@_icon-font-text-hide
) {
.lib-icon-font(
@_icon-font-content: @_dropdown-toggle-icon-content,
@_icon-font: @_icon-font,
@_icon-font-size: @_icon-font-size,
@_icon-font-line-height: @_icon-font-line-height,
@_icon-font-color: @_icon-font-color,
@_icon-font-color-hover: @_icon-font-color-hover,
@_icon-font-color-active: @_icon-font-color-active,
@_icon-font-margin: @_icon-font-margin,
@_icon-font-vertical-align: @_icon-font-vertical-align,
@_icon-font-position: @_icon-font-position,
@_icon-font-text-hide: @_icon-font-text-hide
);

&.active {
.lib-icon-font(
@_icon-font-content: @_dropdown-toggle-active-icon-content,
@_icon-font: @_icon-font,
@_icon-font-size: @_icon-font-size,
@_icon-font-line-height: @_icon-font-line-height,
@_icon-font-color: @_icon-font-color,
@_icon-font-color-hover: @_icon-font-color-hover,
@_icon-font-color-active: @_icon-font-color-active,
@_icon-font-margin: @_icon-font-margin,
@_icon-font-vertical-align: @_icon-font-vertical-align,
@_icon-font-position: @_icon-font-position,
@_icon-font-text-hide: @_icon-font-text-hide
);
}
}

//
// Split dropdowns
// ---------------------------------------------

// Split dropdown icon
._lib-dropdown-split-icon(
@_dropdown-toggle-icon-content,
@_dropdown-toggle-active-icon-content,
@_icon-font,
@_icon-font-size,
@_icon-font-line-height,
@_icon-font-color,
@_icon-font-color-hover,
@_icon-font-color-active,
@_icon-font-margin,
@_icon-font-vertical-align,
@_icon-font-position,
@_icon-font-text-hide
) {
.lib-button-icon(
@_icon-font-content: @_dropdown-toggle-icon-content,
@_icon-font: @_icon-font,
@_icon-font-size: @_icon-font-size,
@_icon-font-line-height: @_icon-font-line-height,
@_icon-font-color: @_icon-font-color,
@_icon-font-color-hover: @_icon-font-color-hover,
@_icon-font-color-active: @_icon-font-color-active,
@_icon-font-margin: @_icon-font-margin,
@_icon-font-vertical-align: @_icon-font-vertical-align,
@_icon-font-position: @_icon-font-position,
@_icon-font-text-hide: @_icon-font-text-hide
);

&.active {
.lib-button-icon(
@_icon-font-content: @_dropdown-toggle-active-icon-content,
@_icon-font: @_icon-font,
@_icon-font-size: @_icon-font-size,
@_icon-font-line-height: @_icon-font-line-height,
@_icon-font-color: @_icon-font-color,
@_icon-font-color-hover: @_icon-font-color-hover,
@_icon-font-color-active: @_icon-font-color-active,
@_icon-font-margin: @_icon-font-margin,
@_icon-font-vertical-align: @_icon-font-vertical-align,
@_icon-font-position: @_icon-font-position,
@_icon-font-text-hide: @_icon-font-text-hide
);
}
}

// Split dropdown toggle position = left
._lib-dropdown-split-toggle-position(
@_button-selector,
@_toggle-selector,
@_dropdown-split-toggle-position,
@_dropdown-split-button-border-radius-fix
) when (@_dropdown-split-toggle-position = left) {
@{_button-selector} {
float: right;
margin: 0;
}

@{_toggle-selector} {
float: left;
margin: 0;
}
}

// Split dropdown toggle position = right
._lib-dropdown-split-toggle-position(
@_button-selector,
@_toggle-selector,
@_dropdown-split-toggle-position,
@_dropdown-split-button-border-radius-fix
) when (@_dropdown-split-toggle-position = right) {
@{_button-selector} {
float: left;
margin: 0;
}

@{_toggle-selector} {
float: right;
margin: 0;
}
}

// Split dropdown toggle position = right
// and
// Dropdown-split-button-border-radius-fix = true

._lib-dropdown-split-toggle-position(
@_button-selector,
@_toggle-selector,
@_dropdown-split-toggle-position,
@_dropdown-split-button-border-radius-fix
) when (@_dropdown-split-toggle-position = right) and (@_dropdown-split-button-border-radius-fix = true) {
button@{_button-selector} {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}

button + @{_toggle-selector} {
border-bottom-left-radius: 0;
border-left: 0;
border-top-left-radius: 0;
}
}

// Split dropdown toggle position = left
// and
// Dropdown-split-button-border-radius-fix = true

._lib-dropdown-split-toggle-position(
@_button-selector,
@_toggle-selector,
@_dropdown-split-toggle-position,
@_dropdown-split-button-border-radius-fix
) when (@_dropdown-split-toggle-position = left) and (@_dropdown-split-button-border-radius-fix = true) {
button@{_button-selector} {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}

button + @{_toggle-selector} {
border-bottom-right-radius: 0;
border-right: 0;
border-top-right-radius: 0;
}
}

//
// Dropdown show pointer
// ---------------------------------------------

._lib-dropdown-list-pointer(
@_dropdown-list-background,
@_dropdown-list-pointer-border,
@_dropdown-list-pointer-position,
@_dropdown-list-pointer-position-top,
@_dropdown-list-pointer-position-left-right
) when (@_dropdown-list-pointer = true) {
._lib-dropdown-pointer(
@_dropdown-list-background,
@_dropdown-list-pointer-border,
@_dropdown-list-pointer-position,
@_dropdown-list-pointer-position-top,
@_dropdown-list-pointer-position-left-right
);
}

._lib-dropdown-pointer(
@_dropdown-list-background,
@_dropdown-list-pointer-border,
@_dropdown-list-pointer-position,
@_dropdown-list-pointer-position-top,
@_dropdown-list-pointer-position-left-right
) when (@_dropdown-list-pointer-position = left) {
._lib-dropdown-pointer-default(
@_dropdown-list-background,
@_dropdown-list-pointer-border
);

&:before {
.lib-css(left, @_dropdown-list-pointer-position-left-right);
.lib-css(top, @_dropdown-list-pointer-position-top);
}

&:after {
.lib-css(left, @_dropdown-list-pointer-position-left-right - 1);
.lib-css(top, @_dropdown-list-pointer-position-top - 2);
}
}

._lib-dropdown-pointer(
@_dropdown-list-background,
@_dropdown-list-pointer-border,
@_dropdown-list-pointer-position,
@_dropdown-list-pointer-position-top,
@_dropdown-list-pointer-position-left-right
) when (@_dropdown-list-pointer-position = right) {
._lib-dropdown-pointer-default(
@_dropdown-list-background,
@_dropdown-list-pointer-border
);

&:before {
.lib-css(right, @_dropdown-list-pointer-position-left-right);
.lib-css(top, @_dropdown-list-pointer-position-top);
}

&:after {
.lib-css(right, @_dropdown-list-pointer-position-left-right - 1);
.lib-css(top, @_dropdown-list-pointer-position-top - 2);
}
}

._lib-dropdown-pointer-default(
@_dropdown-list-background,
@_dropdown-list-pointer-border
) {
&:before,
&:after {
border-bottom-style: solid;
content: '';
display: block;
height: 0;
position: absolute;
width: 0;
}

&:before {
border: 6px solid;
.lib-css(border-color, transparent transparent @_dropdown-list-background transparent);
z-index: 99;
}

&:after {
border: 7px solid;
.lib-css(border-color, transparent transparent @_dropdown-list-pointer-border transparent);
z-index: 98;
}
}

// Dropdown list item border != 0
._lib-dropdown-list-item-border(
@_dropdown-list-item-border
) when not (@_dropdown-list-item-border = 0) and not (@_dropdown-list-item-border = false) and not (@_dropdown-list-item-border = '') {
.lib-css(border-top, @_dropdown-list-item-border);

&:first-child {
border: none;
}
}

// Dropdown list shadow
._lib-dropdown-list-shadow(
@_dropdown-list-shadow
) when not (@_dropdown-list-shadow = '') and not (@_dropdown-list-shadow = none) {
.lib-css(box-shadow, @_dropdown-list-shadow);
}