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

// Color Variables
$modal-backdrop-color:             color("greys", "darkest");

// Border Variables
$modal-border:                     container("border");

// Size Variables
$modal-width--small:               500px;
$modal-width--large:               1280px;


// Positioning Variables
$modal-footer-align:               right;
$modal-max-height:                 80%;
$modal-transformY:                 -50%;


// Spacing
$modal-horizontalSpacing:          spacing("single");
$modal-verticalSpacing:            spacing("single");


// Modal header variables
$modal-header-horizontalSpacing:   0;
$modal-header-verticalSpacing:     spacing("base");

$modal-header-title-margin:        0;

$modal-close-size:                 20px;
$modal-close-transformY:           none;

// Modal body variables
$modal-body-horizontalSpacing:     0;
$modal-body-verticalSpacing:       spacing("double");


// Modal footer variables
$modal-footer-horizontalSpacing:   $modal-horizontalSpacing;
$modal-footer-verticalSpacing:     spacing("half");

$modal-footer-button-marginBottom: 0;

$modal-footer-link-fontSize:       fontSize("smaller");
$modal-footer-link-margin:         spacing("single");


// 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-reveal-classes:      $include-html-classes;

// We use these to control the style of the reveal overlay.
$reveal-overlay-bg:                overlay("fill");
$reveal-overlay-bg-old:            $modal-backdrop-color;

// We use these to control the style of the modal itself.
$reveal-modal-bg:                  $body-bg;
$reveal-position-top:              50% !important;
$reveal-default-width:             900px;
$reveal-max-width:                 80%;
$reveal-modal-paddingHorizontal:   spacing("single") * 1.5;
$reveal-modal-paddingVertical:     spacing("single") * 1.5;
$reveal-modal-padding:             $reveal-modal-paddingVertical $reveal-modal-paddingHorizontal;
$reveal-box-shadow:                none;

// We use these to style the reveal close button
$reveal-close-font-size:           fontSize("larger");
$reveal-close-top:                 $modal-verticalSpacing * 0.7;
$reveal-close-side:                $modal-horizontalSpacing * 0.5;
$reveal-close-color:               color("greys", "dark");
$reveal-close-weight:              normal;
$reveal-close-height:              32px;

// We use this to set the default radius used throughout the core.
$reveal-radius:                    0;
$reveal-round:                     0;

// We use these to control the modal border
$reveal-border-style:              solid;
$reveal-border-width:              0;
$reveal-border-color:              container("borderColor");

$reveal-modal-class:               "modal";
$close-reveal-modal-class:         "modal-close";


// Alert modal
// -----------------------------------------------------------------------------
//
// Purpose: Settings for the alert modal box
//
// -----------------------------------------------------------------------------

// Font color, size, family
$alert-font-body:                                      stencilFontFamily("body-font"), Arial, Helvetica, sans-serif;
$alert-font-bodySize:                                  remCalc(stencilNumber("fontSize-root", "px") + 2px);
$alert-font-bodyColor:                                 stencilColor("color-textBase");
$alert-font-headings:                                  stencilFontFamily("headings-font"), Arial, Helvetica, sans-serif;
$alert-font-headingsSize:                              remCalc(stencilNumber("fontSize-h1", "px") + 2px);
$alert-font-headingsColor:                             stencilColor("color-textHeading");

// Modal stylings
$alert-modal-bgColor:                                  stencilColor("alert-backgroundColor") !important;
$alert-modal-borderRadius:                             4px;

// Input stylings
$alert-input-color:                                    stencilColor("input-font-color");
$alert-input-borderColor:                              stencilColor("input-border-color");
$alert-input-borderColorActive:                        stencilColor("input-border-color-active");

// Button wrapper
$alert-button-wrapperMargin:                           25px 0 0;

// Confirm button
$alert-button-bgColor:                                 stencilColor("button--primary-backgroundColor");
$alert-button-bgColorHover:                            stencilColor("button--primary-backgroundColorHover");
$alert-button-bgColorActive:                           stencilColor("button--primary-backgroundColorActive");

$alert-button-borderColor:                             $alert-button-bgColor;
$alert-button-borderColorHover:                        $alert-button-bgColorHover;
$alert-button-borderColorActive:                       $alert-button-bgColorActive;

$alert-button-color:                                   stencilColor("button--primary-color");
$alert-button-colorHover:                              stencilColor("button--primary-colorHover");
$alert-button-colorActive:                             stencilColor("button--primary-colorActive");

// Cancel button
$alert-button-cancel-bgColor:                          transparent;
$alert-button-cancel-bgColorHover:                     transparent;
$alert-button-cancel-bgColorActive:                    transparent;

$alert-button-cancel-borderColor:                      stencilColor("button--default-borderColor");
$alert-button-cancel-borderColorHover:                 stencilColor("button--default-borderColorHover");
$alert-button-cancel-borderColorActive:                stencilColor("button--default-borderColorActive");

$alert-button-cancel-color:                            stencilColor("button--default-color");
$alert-button-cancel-colorHover:                       stencilColor("button--default-colorHover");
$alert-button-cancel-colorActive:                      stencilColor("button--default-colorActive");
