/* ============================================================================
   06-COMPONENTS -> #DROPDOWN
   ========================================================================= */

/**
 * A toggleable menu where options are hidden by default.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Dropdown
 */

.dropdown {
    --dropdown-height: var(--space-40);
    --dropdown-position-bototm: unset;
    --dropdown-position-left: unset;
    --dropdown-position-right: unset;
    --dropdown-position-top: unset;
    --dropdown-width: var(--space-20);

    display: inline-flex;
    position: relative;
}


/**
 * Dropdown menu
 */

.dropdown__menu {
    bottom: var(--dropdown-position-bottom);
    display: none;
    left: var(--dropdown-position-left);
    margin-bottom: var(--space-1);
    margin-top: var(--space-1);
    min-width: var(--dropdown-width);
    position: absolute;
    right: var(--dropdown-position-right);
    top: var(--dropdown-position-top);
    z-index: var(--z-index-40);
}

[data-open=true] > .dropdown__menu {
    display: block;
}


/**
 * Dropdown scroll
 */

.dropdown__scroller {
    display: flex;
    flex-direction: column;
    max-height: var(--dropdown-height);
    overflow-y: scroll;
}




/* MODIFIERS
   ========================================================================= */

/**
 * Modifier: Dropdown position left
 */

.dropdown[data-position-x=left] {
    --dropdown-position-left: 0;
}


/**
 * Modifier: Dropdown position right
 */

.dropdown[data-position-x=right] {
    --dropdown-position-right: 0;
}


/**
 * Modifier: Dropdown position bottom
 */

.dropdown[data-position-y=bottom] {
    --dropdown-position-top: 100%;
}


/**
 * Modifier: Dropdown position top
 */

.dropdown[data-position-y=top] {
    --dropdown-position-bottom: 100%;
}


/**
 * Full width dropdown
 */

.dropdown.dropdown--full-width {
    --dropdown-width: 100%;

    & > .dropdown__position {
        max-width: 100%;            

        & > .dropdown__content {
            width: 100%;
        }
    }
}