// Copyright (c) 2016-2018 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

%dropdown-content {
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

@include exports('dropdown.clarity') {
    .dropdown {
        position: relative;
        display: inline-block;

        .dropdown-toggle {
            display: inline-block;
            position: relative;
            margin: 0;
            white-space: nowrap;
            cursor: pointer;

            //No margins on any immediate dropdown-toggle children
            & > * {
                margin: 0;
            }

            clr-icon[shape^="caret"] {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                color: inherit;
                height: $clr-dropdown-caret-icon-dimension;
                width: $clr-dropdown-caret-icon-dimension;
            }

            &.btn {
                padding-right: $clr-button-horizontal-padding + $clr-dropdown-caret-icon-dimension + $clr-dropdown-caret-left-margin;

                clr-icon[shape^="caret"] {
                    right: $clr-button-horizontal-padding;
                }
            }

            &:not(.btn) {
                padding: 0 $clr-dropdown-caret-icon-dimension + $clr-dropdown-caret-left-margin 0 0;
                color:$clr-dropdown-active-text-color;
                clr-icon[shape^="caret"] {
                    right: 0;
                }
            }
        }

        button.dropdown-toggle:not(.btn) {
            background: transparent;
            border: none;
            cursor: pointer;
            color: $clr-dropdown-active-text-color;
        }
    }

    //Dropdown Menu
    .dropdown-menu > * {
        display: block;
        white-space: nowrap;
    }

    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 0.083333rem;
        display: flex;
        flex-direction: column;
        background: $clr-dropdown-bg-color;
        padding: 0.5rem 0;
        border: $clr-default-borderwidth solid $clr-dropdown-border-color;
        box-shadow: 0 $clr-default-borderwidth 0.125rem $clr-dropdown-box-shadow;
        min-width: 5rem;
        max-width: 15rem;
        border-radius: $clr-global-borderradius;
        visibility: hidden;
        z-index: map-get($clr-layers, dropdown-menu);

        .dropdown-header {
            @include clr-getTypePropertiesForDomElement(dropdown_header, (font-size, font-weight, letter-spacing));

            padding: 0 0.5rem;
            line-height: 0.75rem;
            margin: 0;
            color: $clr-dropdown-header-color;

            @extend %dropdown-content;
        }

        .btn,
        .btn-secondary,
        .btn-info,
        .btn-outline,
        .btn-outline-primary,
        .btn-outline-secondary,
        .btn-outline-warning,
        .btn-outline-danger,
        .btn-outline-success,
        .btn-danger,
        .btn-primary,
        .btn-warning,
        .btn-success,
        .btn-link,
        .dropdown-item {
            @include clr-getTypePropertiesForDomElement(dropdown_text, (font-size, letter-spacing, font-weight));

            background: transparent;
            border: 0;
            color: $clr-dropdown-item-text-color;
            cursor: pointer;
            display: block;
            margin: 0;
            padding: $clr-rem-1px 1rem 0;
            width: 100%;
            text-transform: none;

            @extend %dropdown-content;

            &:hover,
            &:focus {
                background-color: $clr-dropdown-bg-hover-color;
                color: $clr-dropdown-item-text-color;
                text-decoration: none;
            }

            &.expandable {
                $clr-dropdown-caret-xOffset: 0.333rem;

                margin-right: 1rem;
                padding-right: 0.5rem;

                &:before {
                    content: '';
                    float: right;
                    height: 0.5rem;
                    width: 0.5rem;
                    transform: rotate(-90deg) translateX(-1 * $clr-dropdown-caret-xOffset);
                    background-image: generateCaretIcon();
                    @include icon-background-styles();
                    margin: 0;
                }
            }

            &.active {
                background: $clr-dropdown-selection-color;
                color: $clr-dropdown-active-text-color;
            }

            &:active {
                box-shadow: none;
            }

            &:focus {
                outline: 0;
            }

            &.disabled,
            &:disabled {
                cursor: not-allowed;
                opacity: 0.4;
                user-select: none;

                &:hover {
                    background: none;
                }

                &:active,
                &:focus {
                    background: none;
                    box-shadow: none;
                }
            }
        }

        .btn,
        .dropdown-item {
            $adjusted_lineHeight: 1.25rem;
            height: $adjusted_lineHeight;
            line-height: $adjusted_lineHeight;
        }

        @media screen and (max-width: map-get($clr-breakpoints, small)) {
            .btn,
            .dropdown-item {
                $adjusted_lineHeight: 1.5rem;
                height: $adjusted_lineHeight;
                line-height: $adjusted_lineHeight;
            }
        }

        .dropdown-divider {
            border-bottom: $clr-default-borderwidth solid $clr-dropdown-divider-color;
            margin: 0.25rem 0;
        }
    }

    //Directions
    .btn-group-overflow,
    .tabs-overflow,
    .dropdown {
        $dropdown-menu-positional-nudge: 2 * $clr-rem-1px;

        &.open > .dropdown-menu,
        &.open > .dropdown-menu-wrapper > .dropdown-menu {
            visibility: visible;
        }

        &.bottom-left > .dropdown-menu,
        &.bottom-right > .dropdown-menu {
            top: 100%;
            bottom: auto;
            margin: $dropdown-menu-positional-nudge 0 0 0;
        }

        &.bottom-left > .dropdown-menu {
            left: 0;
            right: auto;
        }

        &.bottom-right > .dropdown-menu {
            right: 0;
            left: auto;
        }

        &.top-left > .dropdown-menu,
        &.top-right > .dropdown-menu {
            top: auto;
            bottom: 100%;
            margin: 0 0 $dropdown-menu-positional-nudge 0;
        }

        &.top-left > .dropdown-menu {
            left: 0;
            right: auto;
        }

        &.top-right > .dropdown-menu {
            right: 0;
            left: auto;
        }

        &.left-top > .dropdown-menu,
        &.left-bottom > .dropdown-menu {
            right: 100%;
            left: auto;
            margin: 0 $dropdown-menu-positional-nudge 0 0;
        }

        &.left-bottom > .dropdown-menu {
            top: 0;
            bottom: auto;
        }

        &.left-top > .dropdown-menu {
            bottom: 0;
            top: auto;
        }

        &.right-top > .dropdown-menu,
        &.right-bottom > .dropdown-menu {
            left: 100%;
            right: auto;
            margin: 0 0 0 $dropdown-menu-positional-nudge;
        }

        &.right-bottom > .dropdown-menu {
            top: 0;
            bottom: auto;
        }

        &.right-top > .dropdown-menu {
            bottom: 0;
            top: auto;
        }

        // nested dropdown (submenu)
        .dropdown {
            $clr-dropdown-submenu-overlap-margin: -0.166667rem;
            $clr-dropdown-submenu-vertical-margin: (-1 * 0.75rem) - $clr-rem-1px;
            // -1 is to account for the border that shifts the menu down by 1 pixel

            .dropdown-menu {
                border-color: $clr-dropdown-child-border-color;
                position: absolute;
            }

            &.left-top {
                > .dropdown-menu,
                > .dropdown-menu-wrapper > .dropdown-menu {
                    top: 0;
                    bottom: auto;
                    left: auto;
                    right: 100%;
                    margin-top: $clr-dropdown-submenu-vertical-margin;
                    margin-right: $clr-dropdown-submenu-overlap-margin;
                }
            }
            &.right-top {
                > .dropdown-menu,
                > .dropdown-menu-wrapper > .dropdown-menu {
                    top: 0;
                    bottom: auto;
                    left: 100%;
                    right: auto;
                    margin-top: $clr-dropdown-submenu-vertical-margin;
                    margin-left: $clr-dropdown-submenu-overlap-margin;
                }
            }
            &.left-bottom {
                > .dropdown-menu,
                > .dropdown-menu-wrapper > .dropdown-menu {
                    top: auto;
                    bottom: 0;
                    left: auto;
                    right: 100%;
                    margin-bottom: $clr-dropdown-submenu-vertical-margin;
                    margin-right: $clr-dropdown-submenu-overlap-margin;
                }
            }
            &.right-bottom {
                > .dropdown-menu,
                > .dropdown-menu-wrapper > .dropdown-menu {
                    top: auto;
                    bottom: 0;
                    left: 100%;
                    right: auto;
                    margin-bottom: $clr-dropdown-submenu-vertical-margin;
                    margin-left: $clr-dropdown-submenu-overlap-margin;
                }
            }

        }
    }
}