// =============================================================================
// DROPDOWN (Settings)
// =============================================================================


// Bigcommerce Variables
// -----------------------------------------------------------------------------
//
// These scoped variables are created by Bigcommerce.
// All variables that are not from Foundation should be placed here.
//
// 1. Choose whether to include the Bigcommerce class names
//
// -----------------------------------------------------------------------------

$exportCSS--dropdown:             $exportCSS !default; // 1

$f-dropdown-boxShadow:            0 2px 3px 0 color("greys", "lighter") !default;
$f-dropdown-marginTop:            -1px !default;


// Foundation Variables
// -----------------------------------------------------------------------------
//
// These variables come directly from:
// /vendor/foundation/foundation/components/*
// Declaring the variables here, you can adjust them all to your design,
// leaving the vendor framework untouched.
//
// -----------------------------------------------------------------------------

$include-html-dropdown-classes:   $include-html-classes !default;

// We use these to controls height and width styles.
$f-dropdown-max-width:            200px !default;
$f-dropdown-height:               auto !default;
$f-dropdown-max-height:           none !default;

// Used for bottom position
$f-dropdown-margin-top:           -1px !default;

// Used for right position
$f-dropdown-margin-left:          $f-dropdown-margin-top !default;

// Used for left position
$f-dropdown-margin-right:         $f-dropdown-margin-top !default;

// Used for top position
$f-dropdown-margin-bottom:        $f-dropdown-margin-top !default;

// We use this to control the background color
$f-dropdown-bg:                   container("fill") !default;

// We use this to set the border styles for dropdowns.
$f-dropdown-border-style:         container("borderStyle") !default;
$f-dropdown-border-width:         container("borderSize") !default;
$f-dropdown-border-color:         container("borderColor", "dark") !default;

// We use these to style the triangle pip.
$f-dropdown-triangle-size:        6px !default;
$f-dropdown-triangle-color:       container(fill, light) !default;
$f-dropdown-triangle-side-offset: 10px !default;

// We use these to control styles for the list elements.
$f-dropdown-list-style:           none !default;
$f-dropdown-font-color:           color("greys", "dark") !default;
$f-dropdown-font-size:            $base-font-size !default;
$f-dropdown-line-height:          $base-line-height !default;
$f-dropdown-list-hover-bg:        color("greys", "lightest") !default;
$f-dropdown-list-padding:         spacing("quarter") !default;
$dropdown-mobile-default-float:   0 !default;

// We use this to control the styles for when the dropdown has custom content.
$f-dropdown-content-padding:      spacing("half") !default;

// Default radius for dropdown.
$f-dropdown-radius:               $global-radius !default;