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

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

//
//  Variables
//  _____________________________________________

@color-blue-pure: #007bdb;

@action__height: 3.2rem;
@action__width: 3.2rem;

//  Triangle marker
@button-marker-triangle__height: .5rem;
@button-marker-triangle__width: .8rem;

@button__border-color: @color-gray68;

@action__border-color: @color-gray68;
@action__active__border-color: @action__border-color;
@action__hover__border-color: @action__border-color;

@action-select__disabled__color: @text__color;
@action-select__z-index: @z-index-5;

@field-control__box-shadow: 0 0 3px 1px @color-blue3;
@field-control__active__border-color: @color-blue-pure;
@field-control__hover__border-color: @action__hover__border-color;

@_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>
.admin__action-group-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 {
        .lib-text-overflow();

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

        &:hover {
            border-color: @color-gray68;

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

        //  Toggle action
        &:extend(.abs-icon-add all);

        &:before {
            align-items: center;
            content: @icon-down;
            display: flex;
            font-size: 24px;
            justify-content: space-around;
            line-height: 1;
            position: absolute;
            right: 0;
            width: @action__width;
        }

        &._active {
            &:before {
                content: @icon-up;
            }
        }

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

        &._mage-error {
            border: 1px solid @form-element-validation__border-error;
        }
    }

    &._focus {
        .action-select {
            &._mage-error {
                border: 1px solid @form-element-validation__border-error;
            }
        }
    }

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

        .action-select {
            &:before {
                content: @icon-up;
            }
        }

        .action-menu {
            .lib-css(box-shadow, @field-control__box-shadow);
        }
    }

    .action-menu {
        border: 1px solid @action__border-color;
        display: none;
        max-height: 45rem;
        overflow-y: auto;

        &._active {
            display: block;
        }

        ._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%;
            }
        }
    }

    .validate-select-field {
        .lib-visually-hidden();
    }
}