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

//
//  Forms -> Dropdown element
//  _____________________________________________

//
//  Variables
//  _____________________________________________

//
//  Utilities
//  ---------------------------------------------

.admin__action-dropdown-menu__align(
    @_align
) when (@_align = left) {
    .admin__action-dropdown-text {
        &:after {
            left: -(@component__shadow-size__base + 1);
            right: 0;
        }
    }

    .admin__action-dropdown-menu {
        left: auto;
        right: 0;
    }
}

.admin__action-dropdown-menu__align(
    @_align
) when (@_align = right) {
    .admin__action-dropdown-text {
        &:after {
            left: 0;
            right: -(@component__shadow-size__base + 1);
        }
    }

    .admin__action-dropdown-menu {
        left: 0;
        right: auto;
    }
}

.action-dropdown-menu-link-pattern() {
    color: @action-dropdown__color;
    display: block;
    text-decoration: none;
}

//

.admin__action-dropdown-wrap {
    .admin__action-dropdown-menu__align(left);
    display: inline-block;
    position: relative;

    &.active,
    &._active {
        .admin__action-dropdown {
            border-color: @action-dropdown__active__border-color;
            box-shadow: @component__box-shadow__base;
        }

        //  Dropdown helper to prevent box shadow unnecessary appearing
        .admin__action-dropdown-text {
            &:after {
                background-color: @action-dropdown__background-color;
                content: '';
                height: @component__shadow-size__base + 1;
                position: absolute;
                top: 100%;
            }
        }

        .admin__action-dropdown-menu {
            display: block;
        }
    }

    &._disabled {
        .admin__action-dropdown {
            cursor: default;
        }

        &:hover {
            .admin__action-dropdown {
                color: @action-dropdown__color;
            }
        }
    }
}

.admin__action-dropdown {
    .action-toggle-triangle(
        @_dropdown__padding-right: @action-dropdown__padding-right;
    );
    background-color: @action-dropdown__background-color;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 0;
    box-shadow: none;
    color: @action-dropdown__color;
    display: inline-block;
    font-size: @action-dropdown__font-size;
    font-weight: @font-weight__regular;
    letter-spacing: -.025em;
    padding: @action-dropdown__padding-top @action-dropdown__padding-right @action-dropdown__padding-bottom @action-dropdown__padding-horizontal;
    position: relative;
    vertical-align: baseline;
    z-index: 2;

    &:hover,
    &:focus {
        background-color: @action-dropdown__background-color;
        color: @action-dropdown__hover__color;
        text-decoration: none;
    }

    //  Triangle
    &:after {
        right: @action-dropdown__padding-horizontal;
    }

    //  Icon
    &:before {
        margin-right: 1rem;
    }
}

.admin__action-dropdown-menu {
    background-color: @action-dropdown__background-color;
    border: 1px solid @action-dropdown__active__border-color;
    box-shadow: @component__box-shadow__base;
    display: none;
    line-height: @line-height__base;
    margin-top: -1px;
    min-width: 120%;
    padding: @action-dropdown-menu__padding-vertical @action-dropdown-menu__padding-horizontal;
    position: absolute;
    top: 100%;
    transition: all @appearing__transition-duration @apperaing__transition-timing-function;
    z-index: 1;

    > li {
        display: block;

        > a {
            .action-dropdown-menu-link-pattern();
            padding: @action-dropdown-menu-link__padding-vertical @action-dropdown-menu-link__padding-horizontal;
        }
    }
}

//  Generic select lists

.selectmenu {
    &:extend(.abs-form-control-pattern);
    display: inline-block;
    padding-left: 1.5rem;
    position: relative;
    text-align: left;
    width: auto;
    z-index: 1;

    &:hover {
        &:extend(.abs-form-control-pattern:hover);
    }

    &._focus {
        &:extend(.abs-form-control-pattern:focus);
    }

    &._active {
        border-color: @action__active__border-color;
        z-index: @action-select__z-index;
    }

    .action-save,
    .action-edit,
    .action-delete {
        .action-icon();

        &:before {
            &:extend(.abs-icon all);
            content: @icon-delete__content;
        }

        > span {
            &:extend(.abs-visually-hidden all);
        }

        padding: 0 1rem 0 1rem;
    }

    .action-edit,
    .action-delete {
        border: 0 solid @color-white;
        border-left-width: 1px;
        bottom: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;

        &:hover {
            border: 0 solid @color-white;
            border-left-width: 1px;
        }
    }

    .action-save:before {
        content: @icon-arrow-right__content;
    }

    .action-edit:before {
        content: @icon-edit__content;
    }
}

.selectmenu-value {
    display: inline-block;

    input[type='text'] {
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        border: 0;
        display: inline;
        margin: 0;
        width: 6rem;

        body._keyfocus &:focus {
            box-shadow: none;
        }
    }
}

.selectmenu-toggle {
    .action-toggle-triangle();
    background: transparent;
    border-width: 0;
    bottom: 0;
    float: right;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;

    &:focus,
    &:active,
    &:hover {
        background: transparent;
    }

    .selectmenu:hover & {
        &:before {
            &:extend(.abs-form-control-pattern:hover);
        }
    }

    .selectmenu._active &:before {
        border-color: @action__active__border-color;
    }

    .selectmenu._focus &:before {
        &:extend(.abs-form-control-pattern:focus);
    }

    body._keyfocus &:focus {
        box-shadow: none;
    }

    span {
        &:extend(.abs-visually-hidden all);
    }

    &:before {
        background: @color-gray89;
        border-left: 1px solid @action__border-color;
        bottom: 0;
        content: '';
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        width: 3.2rem;
    }
}

.selectmenu-items {
    background: @action-dropdown__background-color;
    border: 1px solid @action__active__border-color;
    box-shadow: @component__box-shadow__base;
    display: none;
    float: left;
    left: -1px;
    margin-top: 3px;
    max-width: 20rem;
    min-width: ~'calc(100% + 2px)';
    position: absolute;
    top: 100%;

    &._active {
        display: block;
    }

    ul {
        float: left;
        list-style-type: none;
        margin: 0;
        min-width: 100%;
        padding: 0;
    }

    li {
        .lib-vendor-prefix-display(flex);
        .lib-vendor-prefix-flex-direction(row);
        display: flex;
        flex-direction: row;
        transition: background .2s linear;

        &:hover {
            background: @action-menu__hover__background-color;
        }

        &:last-child {
            .selectmenu-item-action {
                .lib-link();
            }
        }
    }
}

.selectmenu-item {
    position: relative;
    width: 100%;
    z-index: 1;

    li._edit > & {
        display: none;
    }
}

.selectmenu-item-edit {
    display: none;
    padding: .3rem 4rem .3rem .4rem;
    position: relative;
    white-space: nowrap;
    z-index: 1;

    li:last-child & {
        padding-right: .4rem;
    }

    .admin__control-text {
        margin: 0;
        width: 5.4rem;
    }

    li._edit & {
        display: block;
    }
}

.selectmenu-item-action {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    color: @text__color;
    display: block;
    font-size: @font-size__base;
    font-weight: @font-weight__regular;
    min-width: 100%;
    padding: 1rem 6rem 1rem 1.5rem;
    text-align: left;
    transition: background .2s linear;
    width: 5rem;

    &:hover,
    &:focus {
        background: @action-menu__hover__background-color;
    }
}