// =============================================================================
// ALERTS (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--alerts:                $exportCSS !default; // 1


// Color/State Modifiers
// -----------------------------------------------------------------------------

$alert-generic-bgColor:            color("greys", "light") !default;
$alert-generic-iconColor:          color("greys") !default;

$alert-info-bgColor:               color("info", "light") !default;
$alert-info-iconColor:             color("info") !default;

$alert-success-bgColor:            color("success", "light") !default;
$alert-success-iconColor:          color("success") !default;

$alert-warning-bgColor:            color("warning", "light") !default;
$alert-warning-iconColor:          color("warning") !default;

$alert-error-bgColor:              color("error", "light") !default;
$alert-error-iconColor:            color("error") !default;


//
// Alert content settings
// -----------------------------------------------------------------------------

// Icon control
$alert-iconSize:                   20px !default;
// Buttons
$alert-button-margin:              0 0 0 spacing("half") !default;
// Alert Column
$alert-column-textAlign:           center !default;
// Alert Message
$alert-message-textAlign:          left !default;
$alert-message-margin:             0 !default;
// Alert Heading
$alert-heading-margin:             0 !default;
// ALert Close
$alert-close-cursor:               $cursor-pointer-value !default;
$alert-close-iconSize:             20px !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-alert-classes:       $include-html-classes !default;

// We use this to control alert padding.
$alert-padding-top:                spacing("base") !default;
$alert-padding-default-float:      spacing("single") !default;
$alert-padding-opposite-direction: $alert-padding-default-float !default;
$alert-padding-bottom:             $alert-padding-top !default;

// We use these to control text style.
$alert-font-weight:                $font-weight-normal !default;
$alert-font-size:                  fontSize("base") !default;
$alert-font-color:                 $body-font-color !default;
$alert-font-color-alt:             $body-font-color !default;

// We use this for close hover effect.
$alert-function-factor:            0% !default;

// We use these to control border styles.
$alert-border-style:               none !default;
$alert-border-width:               null !default;
$alert-border-color:               null !default;
$alert-bottom-margin:              spacing("half") !default;

// We use these to style the close buttons
$alert-close-color:                color("greys") !default;
$alert-close-top:                  null !default;
$alert-close-position:             null !default;
$alert-close-font-size:            null !default;
$alert-close-opacity:              null !default;
$alert-close-opacity-hover:        null !default;
$alert-close-padding:              null !default;
$alert-close-background:           null !default;

// We use this to control border radius
$alert-radius:                     $global-radius !default;

$alert-transition-speed:           300ms !default;
$alert-transition-ease:            ease-out !default;