// =============================================================================
// 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:             true; // 1

$f-dropdown-boxShadow:            null;
$f-dropdown-marginTop:            null;


// 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;

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

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

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

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

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

// We use this to control the background color
$f-dropdown-bg:                   color("greys", "lightest");

// We use this to set the border styles for dropdowns.
$f-dropdown-border-style:         null;
$f-dropdown-border-width:         null;
$f-dropdown-border-color:         null;

// We use these to style the triangle pip.
$f-dropdown-triangle-size:        null;
$f-dropdown-triangle-color:       null;
$f-dropdown-triangle-side-offset: null;

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

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

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


// Stencil variables
// -----------------------------------------------------------------------------

$dropdown-icon:                   url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI2IiB2aWV3Qm94PSIwIDAgOCA2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik00IDQuNDVMNy41NDIgMS4xNCA3LjY5NSAxIDggMS4yODVsLS4xNTMuMTQyLTMuNjc0IDMuNDNMNC4wMiA1IDQgNC45OCAzLjk4IDVsLS4xNTMtLjE0Mi0zLjY3NC0zLjQzTDAgMS4yODQuMzA1IDFsLjE1My4xNDJMNCA0LjQ1eiIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlPSIjNDU0NTQ1IiBmaWxsPSIjNDU0NTQ1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");
