// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */
// # Drop-down and split buttons mixins
//
// Magento UI library provides mixins for 2 types of drop-downs: the .lib-dropdown()
mixin for drop-down and the .lib-dropdown-split()
mixin for split button.
//
// # Drop-down
//
// In Magento UI library the dropdown does not depend on the toggle tag. To toggle the drop-down, the corresponding tag must have class="action toggle"
.
//
// ## Button tag drop-down toggle
//
// To implement a drop-down using a button + drop-down, use the following markup:
//
// ```html
//
//
// Mixin variable |
// Global variable |
// Default value |
// Allowed values |
// Comment |
//
//
// @_toggle-selector |
// - |
// ~".action.toggle" |
// Selector |
// Toggle selector |
//
//
// @_options-selector |
// - |
// ~"ul.dropdown" |
// Selector |
// Options selector |
//
//
// @_dropdown-actions-padding |
// @dropdown-actions__padding |
// false |
// '' | false | value |
// Drop-down toggle element padding |
//
//
// @_dropdown-list-min-width |
// @dropdown-list__min-width |
// 100% |
// '' | false | value |
// Drop-down min width value |
//
//
// @_dropdown-list-width |
// @dropdown-list__width |
// false |
// '' | false | value |
// Drop-down list width value |
//
//
// @_dropdown-list-height |
// @dropdown-list__height |
// false |
// '' | false | value |
// Drop-down list height value |
//
//
// @_dropdown-list-margin-top |
// @dropdown-list__margin-top |
// 4px |
// '' | false | value |
// Drop-down list margin-top value |
//
//
// Drop-down list |
//
//
// @_dropdown-list-position-top |
// @dropdown-list__position-top |
// 100% |
// '' | false | value |
// Drop-down list position: top |
//
//
// @_dropdown-list-position-right |
// @dropdown-list__position-right |
// false |
// '' | false | value |
// Drop-down list position: right |
//
//
// @_dropdown-list-position-bottom |
// @dropdown-list__position-bottom |
// false |
// '' | false | value |
// Drop-down list position: bottom |
//
//
// @_dropdown-list-position-left |
// @dropdown-list__position-left |
// false |
// '' | false | value |
// Drop-down list position: left |
//
//
// @_dropdown-list-background |
// @dropdown-list__background |
// @color-white |
// '' | false | value |
// Drop-down list background |
//
//
// @_dropdown-list-border |
// @dropdown-list__border |
// 1px solid #bbb |
// '' | false | value |
// Drop-down list border |
//
//
// @_dropdown-list-pointer |
// @dropdown-list__pointer |
// true |
// true | false |
// Drop-down list pointer is visible |
//
//
// @_dropdown-list-pointer-border |
// @dropdown-list-pointer__border |
// #bbb |
// '' | false | value |
// Drop-down list pointer border |
//
//
// @_dropdown-list-pointer-position |
// @dropdown-list-pointer__position |
// left |
// left | right |
// Drop-down pointer position |
//
//
// @_dropdown-list-pointer-position-top |
// @dropdown-list-pointer__position-top |
// -12px |
// value |
// Drop-down pointer top position |
//
//
// @_dropdown-list-pointer-position-left-right |
// @dropdown-list-pointer__position-left-right |
// 10px |
// value |
// Drop-down pointer left or right position |
//
//
// @_dropdown-list-item-border |
// @dropdown-list-item__border |
// 0 |
// '' | false | value |
// Drop-down list item border |
//
//
// @_dropdown-list-item-padding |
// @dropdown-list-item__padding |
// 3px @indent__xs |
// '' | false | value |
// Drop-down list item padding |
//
//
// @_dropdown-list-item-margin |
// @dropdown-list-item__margin |
// 0 |
// '' | false | value |
// Drop-down list item margin |
//
//
// @_dropdown-list-item-hover |
// @dropdown-list-item__hover |
// #e8e8e8 |
// '' | false | value |
// Drop-down list item hovered background |
//
//
// @_dropdown-list-shadow |
// @dropdown-list__shadow |
// 0 3px 3px rgba(0,0,0,.15) |
// '' | false | value |
// Drop-down list shadow |
//
//
// @_dropdown-list-z-index |
// @dropdown-list__z-index |
// 100 |
// '' | false | value |
// Drop-down list z-index |
//
//
// Drop-down icon |
//
//
// @_dropdown-toggle-icon-content |
// @dropdown-toggle-icon__content |
// @icon-pointer-down |
// '' | false | value |
// Drop-down toggle icon symbol code for default state |
//
//
// @_dropdown-toggle-active-icon-content |
// @dropdown-toggle-icon__active__content |
// @icon-pointer-up |
// '' | false | value |
// Drop-down toggle icon symbol code for active state |
//
//
// @_icon-font |
// @dropdown-toggle-icon__font |
// @button-icon__font |
// '' | false | value |
// Drop-down toggle icon font |
//
//
// @_icon-font-size |
// @dropdown-toggle-icon__font-size |
// @button-icon__font-size |
// '' | false | value |
// Drop-down toggle icon font size |
//
//
// @_icon-font-line-height |
// @dropdown-toggle-icon__font-line-height |
// @button-icon__line-height |
// '' | false | value |
// Drop-down toggle icon line height |
//
//
// @_icon-font-color |
// @dropdown-toggle-icon__font-color |
// @button-icon__color |
// '' | false | value |
// Drop-down toggle icon color |
//
//
// @_icon-font-color-hover |
// @dropdown-toggle-icon__font-color-hover |
// @button-icon__hover__font-color |
// '' | false | value |
// Drop-down toggle icon hovered color |
//
//
// @_icon-font-color-active |
// @dropdown-toggle-icon__font-color-active |
// @button-icon__active__font-color |
// '' | false | value |
// Drop-down toggle icon active color |
//
//
// @_icon-font-margin |
// @dropdown-toggle-icon__font-margin |
// @button-icon__margin |
// '' | false | value |
// Drop-down toggle icon margin |
//
//
// @_icon-font-position |
// @dropdown-toggle-icon__position |
// after |
// before | after |
// Drop-down toggle icon position |
//
//
// @_icon-font-vertical-align |
// @dropdown-toggle-icon__font-vertical-align |
// @button-icon__vertical-align |
// '' | false | value |
// Drop-down toggle icon vertical align |
//
//
// @_icon-font-text-hide |
// @dropdown-toggle-icon__text-hide |
// @button-icon__text-hide |
// true | false |
// Text in the tag, that contains icon, is hidden |
//
//
//
//
// # Drop-down with icon customization
//
// To customize drop-down icon symbol, specify variables for default state icon code and active state icon code:
// ```css
// @_dropdown-toggle-icon-content: @icon-expand,
// @_dropdown-toggle-active-icon-content: @icon-collapse
// ```
// The
//
// Mixin variable |
// Global variable |
// Default value |
// Allowed values |
// Comment |
//
//
// @_toggle-selector |
// - |
// ~".action.toggle" |
// selector |
// Split button action toggle selector |
//
//
// @_options-selector |
// - |
// ~"ul.dropdown" |
// selector |
// Split button options selector |
//
//
// @_button-selector |
// - |
// ~".action.split" |
// selector |
// Split button selector |
//
//
// @_dropdown-split-actions-padding |
// @dropdown-split-actions__padding |
// 0 @indent__xs |
// '' | false | value |
// Split button toggle element padding |
//
//
// @_dropdown-split-button-actions-padding |
// @dropdown-split-button__actions__padding |
// false |
// '' | false | value |
// Split button actions padding |
//
//
// @_dropdown-split-toggle-actions-padding |
// @dropdown-split-toggle__actions__padding |
// 4px @indent__xs |
// '' | false | value |
// Split button toggle padding |
//
//
// @_dropdown-split-toggle-position |
// @dropdown-split-toggle__position |
// right |
// '' | false | value |
// Split button toggle element position |
//
//
// Drop-down list |
//
//
// @_dropdown-split-list-min-width |
// @dropdown-split-list__min-width |
// 100% |
// '' | false | value |
// Split button min width |
//
//
// @_dropdown-split-list-width |
// @dropdown-split-list__width |
// 100% |
// '' | false | value |
// Split button width |
//
//
// @_dropdown-split-list-height |
// @dropdown-split-list__height |
// false |
// '' | false | value |
// Split button height |
//
//
// @_dropdown-split-list-margin-top |
// @dropdown-split-list__margin-top |
// 4px |
// '' | false | value |
// Split button margin-top |
//
//
// @_dropdown-split-list-position-top |
// @dropdown-split-list__position-top |
// @dropdown-list__position-top |
// '' | false | value |
// Split button drop-down list position: top |
//
//
// @_dropdown-split-list-position-right |
// @dropdown-split-list__position-right |
// @dropdown-list__position-right |
// '' | false | value |
// Split button drop-down list position: right |
//
//
// @_dropdown-split-list-position-bottom |
// @dropdown-split-list__position-bottom |
// @dropdown-list__position-bottom |
// '' | false | value |
// Split button drop-down list position: bottom |
//
//
// @_dropdown-split-list-position-left |
// @dropdown-split-list__position-left |
// @dropdown-list__position-left |
// '' | false | value |
// Split button drop-down list position: left |
//
//
// @_dropdown-split-list-background |
// @dropdown-split-list__background |
// @dropdown-list__background |
// '' | false | value |
// Split button drop-down background |
//
//
// @_dropdown-split-list-border |
// @dropdown-split-list__border |
// @dropdown-list__border |
// '' | false | value |
// Split button drop-down border |
//
//
// @_dropdown-split-list-pointer |
// @dropdown-split-list__pointer |
// @dropdown-list__pointer |
// '' | false | value |
// Split button drop-down list pointer |
//
//
// @_dropdown-split-list-pointer-border |
// @dropdown-split-list__pointer-border |
// @dropdown-list-pointer__border |
// '' | false | value |
// Split button drop-down list pointer border |
//
//
// @_dropdown-split-button-border-radius-fix |
// @dropdown-split-button__border-radius-fix |
// false |
// true | false |
// Split button drop-down list item border |
//
//
// @_dropdown-split-list-item-border |
// @dropdown-split-list__item-border |
// @dropdown-list-item__border |
// '' | false | value |
// Split button drop-down list item border |
//
//
// @_dropdown-split-list-item-padding |
// @dropdown-split-list__item-padding |
// @dropdown-list-item__padding |
// '' | false | value |
// Split button drop-down list item padding |
//
//
// @_dropdown-split-list-item-margin |
// @dropdown-split-list__item-margin |
// @dropdown-list-item__margin |
// '' | false | value |
// Split button drop-down list item margin |
//
//
// @_dropdown-split-list-item-hover |
// @dropdown-split-list__item-hover |
// @dropdown-list-item__hover |
// '' | false | value |
// Split button drop-down list item hovered background |
//
//
// @_dropdown-split-list-pointer-position |
// @dropdown-split-list__pointer-position |
// right |
// left | right |
// Split button drop-down list pointer position |
//
//
// @_dropdown-split-list-pointer-position-top |
// @dropdown-split-list__pointer-position-top |
// -12px |
// '' | false | value |
// Split button drop-down list pointer position top |
//
//
// @_dropdown-split-list-pointer-position-left-right |
// @dropdown-split-list__pointer-position-left-right |
// 10px |
// '' | false | value |
// Split button drop-down list pointer left or right position |
//
//
// @_dropdown-split-list-shadow |
// @dropdown-split-list__shadow |
// @dropdown-list__shadow |
// '' | false | value |
// Split button drop-down list shadow |
//
//
// @_dropdown-split-list-z-index |
// @dropdown-split-list__z-index |
// @dropdown-list__z-index |
// '' | false | value |
// Split button drop-down list z-index |
//
//
// Dropdown icon |
//
//
// @_dropdown-split-toggle-icon-content |
// @dropdown-split-toggle-icon__content |
// @dropdown-toggle-icon__content |
// '' | false | value |
// Split button drop-down toggle icon - default state |
//
//
// @_dropdown-split-toggle-active-icon-content |
// @dropdown-split-toggle-icon__active__content |
// @dropdown-toggle-icon__active__content |
// '' | false | value |
// Split button drop-down toggle icon - active state |
//
//
// @_icon-font |
// @dropdown-split-toggle-icon__font |
// @button-icon__font |
// '' | false | value |
// Split button drop-down toggle icon font |
//
//
// @_icon-font-size |
// @dropdown-split-toggle-icon__font-size |
// @button-icon__font-size |
// '' | false | value |
// Split button drop-down toggle icon font size |
//
//
// @_icon-font-line-height |
// @dropdown-split-toggle-icon__font-line-height |
// @button-icon__line-height |
// '' | false | value |
// Split button drop-down toggle icon line height |
//
//
// @_icon-font-color |
// @dropdown-split-toggle-icon__font-color |
// @button-icon__color |
// '' | false | value |
// Split button drop-down toggle icon color |
//
//
// @_icon-font-color-hover |
// @dropdown-split-toggle-icon__font-color-hover |
// @button-icon__hover__font-color |
// '' | false | value |
// Split button drop-down toggle icon hovered color |
//
//
// @_icon-font-color-active |
// @dropdown-split-toggle-icon__font-color-active |
// @button-icon__active__font-color |
// '' | false | value |
// Split button drop-down toggle icon active color |
//
//
// @_icon-font-margin |
// @dropdown-split-toggle-icon__font-margin |
// @button-icon__margin |
// '' | false | value |
// Split button drop-down toggle icon margin |
//
//
// @_icon-font-position |
// @dropdown-split-toggle-icon__position |
// after |
// before | after |
// Split button drop-down toggle icon position |
//
//
// @_icon-font-vertical-align |
// @dropdown-split-toggle-icon__font-vertical-align |
// @button-icon__vertical-align |
// '' | false | value |
// Split button drop-down toggle icon vertical align |
//
//
// @_icon-font-text-hide |
// @dropdown-split-toggle-icon__text-hide |
// @button-icon__text-hide |
// true | false |
// The text in the toggle tag is hidden |
//
//
//
// #Split button - button styling
//
// Split buttons can be customized the same way as all types of buttons from Magento UI library.
//
// **Regular button:**
//
// ```html
//