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


// Button Style variables
// -----------------------------------------------------------------------------

$buttonStyle-default-color:                  stencilColor("button--default-color");
$buttonStyle-default-colorHover:             stencilColor("button--default-colorHover");
$buttonStyle-default-colorActive:            stencilColor("button--default-colorActive");
$buttonStyle-default-backgroundColor:        transparent;
$buttonStyle-default-backgroundColorHover:   transparent;
$buttonStyle-default-backgroundColorActive:  transparent;
$buttonStyle-default-borderColor:            stencilColor("button--default-borderColor");
$buttonStyle-default-borderColorHover:       stencilColor("button--default-borderColorHover");
$buttonStyle-default-borderColorActive:      stencilColor("button--default-borderColorActive");

$buttonStyle-primary-color:                  stencilColor("button--primary-color");
$buttonStyle-primary-colorHover:             stencilColor("button--primary-colorHover");
$buttonStyle-primary-colorActive:            stencilColor("button--primary-colorActive");
$buttonStyle-primary-backgroundColor:        stencilColor("button--primary-backgroundColor");
$buttonStyle-primary-backgroundColorHover:   stencilColor("button--primary-backgroundColorHover");
$buttonStyle-primary-backgroundColorActive:  stencilColor("button--primary-backgroundColorActive");
$buttonStyle-primary-borderColor:            stencilColor("button--primary-backgroundColor");
$buttonStyle-primary-borderColorHover:       stencilColor("button--primary-backgroundColorHover");
$buttonStyle-primary-borderColorActive:      stencilColor("button--primary-backgroundColorActive");

$buttonStyle-disabled-color:                 stencilColor("button--disabled-color");
$buttonStyle-disabled-colorHover:            null;
$buttonStyle-disabled-colorActive:           null;
$buttonStyle-disabled-backgroundColor:       stencilColor("button--disabled-backgroundColor");
$buttonStyle-disabled-backgroundColorHover:  null;
$buttonStyle-disabled-backgroundColorActive: null;
$buttonStyle-disabled-borderColor:           stencilColor("button--disabled-borderColor");
$buttonStyle-disabled-borderColorHover:      null;
$buttonStyle-disabled-borderColorActive:     null;

$buttonStyle-tertiary-color:                 null;
$buttonStyle-tertiary-colorHover:            null;
$buttonStyle-tertiary-colorActive:           null;
$buttonStyle-tertiary-backgroundColor:       null;
$buttonStyle-tertiary-backgroundColorHover:  null;
$buttonStyle-tertiary-backgroundColorActive: null;
$buttonStyle-tertiary-borderColor:           null;
$buttonStyle-tertiary-borderColorHover:      null;
$buttonStyle-tertiary-borderColorActive:     null;

$buttonStyle-action-color:                   null;
$buttonStyle-action-colorHover:              null;
$buttonStyle-action-colorActive:             null;
$buttonStyle-action-backgroundColor:         null;
$buttonStyle-action-backgroundColorHover:    null;
$buttonStyle-action-backgroundColorActive:   null;
$buttonStyle-action-borderColor:             null;
$buttonStyle-action-borderColorHover:        null;
$buttonStyle-action-borderColorActive:       null;


// Size Modifiers
// -----------------------------------------------------------------------------

$buttonSize-default-fontSize:           fontSize("base");
$buttonSize-default-horizontalPadding:  spacing("single") + spacing("half");
$buttonSize-default-verticalPadding:    spacing("third") + spacing("quarter");

$buttonSize-large-fontSize:             fontSize("smaller");
$buttonSize-large-horizontalPadding:    null;
$buttonSize-large-verticalPadding:      null;

$buttonSize-small-fontSize:             fontSize("smallest");
$buttonSize-small-horizontalPadding:    spacing("single");
$buttonSize-small-verticalPadding:      spacing("quarter") + spacing("eighth");

$buttonSize-tiny-fontSize:              null;
$buttonSize-tiny-horizontalPadding:     null;
$buttonSize-tiny-verticalPadding:       null;

$buttonSize-square-fontSize:            fontSize("base");
$buttonSize-square-horizontalPadding:   spacing("half");
$buttonSize-square-verticalPadding:     spacing("half");


$button-vAlign:                         middle;
$button-focus-boxShadow:                null;

$button-adjacentButton-marginLeft:      spacing("half");


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

$button-display:                        inline-block;
$button-margin-bottom:                  spacing("base");

$button-font-family:                    fontFamily("headingSans");
$button-font-weight:                    fontWeight("normal");
$button-font-align:                     center;

$button-border-width:                   1px;
$button-border-style:                   solid;

$button-radius:                         $global-radius;




// =============================================================================
// BUTTONS (Maps)
// =============================================================================
//
// The maps that make up buttons. These don't need to be touched, but do need
// to be in this file. Simply modify the value of the variables above to change
// the buttons.
//
// If you would like to add a new button style or size, simply add them to the
// maps below.
//
// -----------------------------------------------------------------------------


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

$buttonStyleMap: (
    default: (
        color:                          $buttonStyle-default-color,
        colorHover:                     $buttonStyle-default-colorHover,
        colorActive:                    $buttonStyle-default-colorActive,
        backgroundColor:                $buttonStyle-default-backgroundColor,
        backgroundColorHover:           $buttonStyle-default-backgroundColorHover,
        backgroundColorActive:          $buttonStyle-default-backgroundColorActive,
        borderColor:                    $buttonStyle-default-borderColor,
        borderColorHover:               $buttonStyle-default-borderColorHover,
        borderColorActive:              $buttonStyle-default-borderColorActive
    ),

    primary: (
        color:                          $buttonStyle-primary-color,
        colorHover:                     $buttonStyle-primary-colorHover,
        colorActive:                    $buttonStyle-primary-colorActive,
        backgroundColor:                $buttonStyle-primary-backgroundColor,
        backgroundColorHover:           $buttonStyle-primary-backgroundColorHover,
        backgroundColorActive:          $buttonStyle-primary-backgroundColorActive,
        borderColor:                    $buttonStyle-primary-borderColor,
        borderColorHover:               $buttonStyle-primary-borderColorHover,
        borderColorActive:              $buttonStyle-primary-borderColorActive
    ),

    disabled: (
        color:                          $buttonStyle-disabled-color,
        colorHover:                     $buttonStyle-disabled-colorHover,
        colorActive:                    $buttonStyle-disabled-colorActive,
        backgroundColor:                $buttonStyle-disabled-backgroundColor,
        backgroundColorHover:           $buttonStyle-disabled-backgroundColorHover,
        backgroundColorActive:          $buttonStyle-disabled-backgroundColorActive,
        borderColor:                    $buttonStyle-disabled-borderColor,
        borderColorHover:               $buttonStyle-disabled-borderColorHover,
        borderColorActive:              $buttonStyle-disabled-borderColorActive
    ),

    tertiary: (
        color:                          $buttonStyle-tertiary-color,
        colorHover:                     $buttonStyle-tertiary-colorHover,
        colorActive:                    $buttonStyle-tertiary-colorActive,
        backgroundColor:                $buttonStyle-tertiary-backgroundColor,
        backgroundColorHover:           $buttonStyle-tertiary-backgroundColorHover,
        backgroundColorActive:          $buttonStyle-tertiary-backgroundColorActive,
        borderColor:                    $buttonStyle-tertiary-borderColor,
        borderColorHover:               $buttonStyle-tertiary-borderColorHover,
        borderColorActive:              $buttonStyle-tertiary-borderColorActive
    ),

    action: (
        color:                          $buttonStyle-action-color,
        colorHover:                     $buttonStyle-action-colorHover,
        colorActive:                    $buttonStyle-action-colorActive,
        backgroundColor:                $buttonStyle-action-backgroundColor,
        backgroundColorHover:           $buttonStyle-action-backgroundColorHover,
        backgroundColorActive:          $buttonStyle-action-backgroundColorActive,
        borderColor:                    $buttonStyle-action-borderColor,
        borderColorHover:               $buttonStyle-action-borderColorHover,
        borderColorActive:              $buttonStyle-action-borderColorActive
    )
);


$buttonSizeMap: (
    default: (
        fontSize:                       $buttonSize-default-fontSize,
        horizontalPadding:              $buttonSize-default-horizontalPadding,
        verticalPadding:                $buttonSize-default-verticalPadding
    ),

    large: (
        fontSize:                       $buttonSize-large-fontSize,
        horizontalPadding:              $buttonSize-large-horizontalPadding,
        verticalPadding:                $buttonSize-large-verticalPadding
    ),

    small: (
        fontSize:                       $buttonSize-small-fontSize,
        horizontalPadding:              $buttonSize-small-horizontalPadding,
        verticalPadding:                $buttonSize-small-verticalPadding
    ),

    tiny: (
        fontSize:                       $buttonSize-tiny-fontSize,
        horizontalPadding:              $buttonSize-tiny-horizontalPadding,
        verticalPadding:                $buttonSize-tiny-verticalPadding
    ),

    square: (
        fontSize:                       $buttonSize-square-fontSize,
        horizontalPadding:              $buttonSize-square-horizontalPadding,
        verticalPadding:                $buttonSize-square-verticalPadding
    )
);
