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

//
//  Actions -> Action select
//  _____________________________________________

//
//  Variables
//  _____________________________________________

@_dropdown__padding-right: @action__height;
@_triangle__height: @button-marker-triangle__height;
@_triangle__width: @button-marker-triangle__width;

//  Action select have the same visual styles and functionality as native <select>
.action-select-wrap {
    @_action-select__border-color: @button__border-color;
    @_action-select__active__border-color: @action__active__border-color;
    @_action-select-toggle__size: @action__height;

    display: inline-block;
    position: relative;

    .action-select {
        .action-toggle-triangle(
        @_dropdown__padding-right;
        @_triangle__height;
        @_triangle__width;
        );
        .lib-text-overflow-ellipsis();

        background-color: @color-white;
        font-weight: @font-weight__regular;
        text-align: left;

        &:hover {
            border-color: @field-control__hover__border-color;

            &:before {
                border-color: @field-control__hover__border-color;
            }
        }

        //  Toggle action
        &:before {
            background-color: @button__background-color;
            border: @button__border-size @button__border-style @_action-select__border-color;
            bottom: 0;
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            width: @_action-select-toggle__size;
        }

        &._active {
            border-color: @_action-select__active__border-color;

            &:before {
                border-color: @_action-select__active__border-color;
                border-left-color: @_action-select__border-color;
            }
        }

        &[disabled] {
            color: @action-select__disabled__color;

            &:after {
                border-color: @action-select__disabled__color transparent transparent transparent;
            }
        }
    }

    &._active {
        z-index: @action-select__z-index;

        .action-select {
            border-color: @field-control__active__border-color;

            &:before {
                border-color: @field-control__active__border-color;
            }

            &:after {
                transform: rotate(180deg);
            }
        }
    }

    .action-menu {
        max-height: 45rem;
        overflow-y: auto;

        ._disabled {
            &:hover {
                background: @color-white;
            }

            .action-menu-item {
                cursor: default;
                opacity: .5;
            }
        }
    }

    .action-menu-items {
        left: 0;
        position: absolute;
        right: 0;
        top: 100%;

        > .action-menu {
            min-width: 100%;
            position: static;

            .action-submenu {
                position: absolute;
                right: -100%;
            }
        }
    }
}