@use './variables';
@use './mixins/nav-divider';
@use './mixins/dropdowns';
@use './mixins/scrollbars';
//
// Dropdown menus
// --------------------------------------------------

// Dropdown arrow/caret
.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-top: -1px;
    margin-left: 2px;
    vertical-align: middle;
    border-top: variables.$caret-width-base dashed;
    border-right: variables.$caret-width-base solid transparent;
    border-left: variables.$caret-width-base solid transparent;

    &.caret-up {
        border-top: 0;
        border-bottom: variables.$caret-width-base dashed;
        content: '';
    }
}

.dropdown-menu {
    display: inline-flex;
    flex-direction: column;
    z-index: variables.$zindex-dropdown;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    background-color: variables.$dropdown-bg;
    border: 1px solid variables.$dropdown-border;
    border-radius: variables.$border-radius-base;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
    background-clip: padding-box;

    // // Dividers (basically an hr) within the dropdown
    .divider {
        border: none;
        @include nav-divider.nav-divider(variables.$dropdown-divider-bg);
    }

    // Dropdown section headers
    .dropdown-header {
        display: block;
        padding: 3px 16px;
        padding-top: 8px;
        font-size: variables.$font-size-base;
        line-height: variables.$line-height-base;
        color: variables.$dropdown-header-color;
        white-space: nowrap;
        text-transform: uppercase;
    }

    .menu-item {
        @include dropdowns.dropdown-menu-link;

        &.active {
            @include dropdowns.dropdown-menu-link-active;
        }

        // Gray out text and ensure the hover/focus state remains gray
        &[disabled],
        &.disabled {
            &,
            &:hover,
            &:focus-visible {
                @include dropdowns.dropdown-menu-link-disabled;
            }
        }
    }
}

.dropdown-menu-block {
    width: 100%;
}

// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: (variables.$zindex-dropdown - 10);
    display: none;
}

.dropdown-menu-inverse {
    $dropdown-inverse-link-color: variables.$level1;
    $dropdown-inverese-link-active-bg: variables.get-color('primary', 3x-light);
    background-color: #ffffff;

    .dropdown-header {
        color: variables.get-color('gray', x-light);
    }
    .menu-item {
        color: $dropdown-inverse-link-color;

        &:hover,
        &:focus-visible {
            color: $dropdown-inverse-link-color;
            background-color: variables.get-color('coolgray', 5x-light);
        }

        &.active {
            &,
            &:hover,
            &:focus-visible {
                color: $dropdown-inverse-link-color;
                background-color: $dropdown-inverese-link-active-bg;
            }
        }

        &[disabled] {
            &,
            &:hover,
            &:focus-visible {
                color: $dropdown-inverse-link-color;
                background-color: transparent;
            }
        }
    }
    .divider {
        background: rgba(variables.$level0, 0.4);
    }
}
// Custom popover styling for dropdowns appended to body
.popover-dropdown {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;

    .tooltip-inner {
        padding: 0;
    }
}

.cdk-overlay-pane {
    @include scrollbars.scrollbars();

    .dropdown-menu.scrollable {
        max-height: 200px;
        overflow-y: auto;
    }
}