// =============================================================================
// _VARIABLES.SCSS
// -----------------------------------------------------------------------------
// Site styles.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Appearance
//   02. Scaffolding
//   03. Links
//   04. Typography
//       a. Font Families
//       b. Base Styles
//       c. Heading Styles
//   05. Tables
//   06. Buttons
//       a. Base Button Styling
//       b. Box Shadows
//   07. Forms and Alerts
//       a. Base Form Styling
//       b. Inputs
//       c. Box Shadows
//       d. Fine-Tune Element Alignment
//       e. Form States and Alert Colors
//       f. Alerts
//   08. Component Variables
//       a. Input Placeholder Text
//       b. Navbar
//       c. Dropdowns
//       d. Alerts
//       e. Tooltips and Popovers
//       f. Colophon
//   09. BuddyPress
//   10. Grid
//       a. Grid Columns
//       b. Fixed
//       c. Fluid
// =============================================================================

// Appearance
// =============================================================================

$skin:                    'light' !default;

$baseBoxShadow:           0 0.15em 0.35em 0 rgba(0, 0, 0, 0.135) !default;
$widgetbarBoxShadow:      0 0.15em 0.35em 0 rgba(0, 0, 0, 0.135) !default;

$baseModBackground:       $white                         !default;
$accentColor:             #2c3e50                        !default;
$widgetBorderColor:       darken($baseModBackground, 5%) !default;
$widgetbarBackground:     $white                         !default;
$widgetbarColor:          #727272                        !default;
$shortcodeBorderColor:    #e5e5e5                        !default;



// Scaffolding
// =============================================================================

$bodyBackground:    #ecf0f1 !default;
$textColor:         #28323f !default;



// Links
// =============================================================================

$linkColor:          #16a085                                                                                                      !default;
$linkColorHover:     #1abc9c                                                                                                      !default;
$linkTransitions:    color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease !default;



// Typography
// =============================================================================

@import "../../../inc/font-stacks";


//
// Font families.
//

$sansFontFamily:     $lato     !default;
$monoFontFamily:     $consolas !default;
$altFontFamily:      $lato     !default;


//
// Base styles.
//

$baseFontSize:      62.5%           !default;
$baseLineHeight:    1.8             !default;
$baseFontWeight:    300             !default;
$baseFontFamily:    $sansFontFamily !default;
$baseMargin:        1.5em           !default;


//
// Heading styles.
//

$headingsFontFamily:    $altFontFamily !default;
$headingsFontWeight:    700            !default;
$headingsColor:         $accentColor   !default;



// Tables
// =============================================================================

$tableBackground:    transparent        !default;
$tableBorder:        $widgetBorderColor !default;



// Buttons
// =============================================================================

//
// Base button styling.
//

$btnRenewColor:              $white          !default;
$btnRenewBorder:             $accentColor    !default;
$btnRenewBackground:         $accentColor    !default;
$btnRenewColorHover:         $white          !default;
$btnRenewBorderHover:        $linkColorHover !default;
$btnRenewBackgroundHover:    $linkColorHover !default;


//
// Box shadows.
//

$btnRenewBoxShadow:    0 0 0 rgba(0, 0, 0, 0), inset 0 0 0 rgba(0, 0, 0, 0) !default;



// Forms and Alerts
// =============================================================================

//
// Base form styling.
//

$formBaseFontWeight:       300     !default;
$formActionsBackground:    #f5f5f5 !default;


//
// Inputs.
//

$inputBackground:            $baseModBackground  !default;
$inputBorder:                #ddd                !default;
$inputBorderFocus:           rgba(0, 0, 0, 0.25) !default;
$inputDisabledBackground:    $grayLighter        !default;


//
// Box shadows.
//

$inputBoxShadow:         inset 0 1px 2px rgba(0, 0, 0, 0.125) !default;
$inputBoxShadowFocus:    inset 0 1px 2px rgba(0, 0, 0, 0.125) !default;


//
// Fine-tune element alignment.
//

$controlGroupMarginTop:               0    !default;
$controlGroupMarginTopAfterLegend:    20px !default;
$controlGroupMarginBottom:            24px !default;
$controlLabelPaddingTop:              4px  !default;
$labelMarginBottom:                   2px  !default;
$legendMargin:                        0    !default;
$fileMarginTop:                       2px  !default;
$checkboxTopPosition:                 2px  !default;
$radioTopPosition:                    1px  !default;


//
// Form states and alert colors.
//

$warningText:          #c09853                                          !default;
$warningBackground:    #fcf8e3                                          !default;
$warningBorder:        darken(adjust-hue($warningBackground, -10), 13%) !default;

$errorText:            #b94a48                                       !default;
$errorBackground:      #f2dede                                       !default;
$errorBorder:          darken(adjust-hue($errorBackground, -10), 9%) !default;

$successText:          #468847                                          !default;
$successBackground:    #dff0d8                                          !default;
$successBorder:        darken(adjust-hue($successBackground, -10), 13%) !default;

$infoText:             #3a87ad                                     !default;
$infoBackground:       #d9edf7                                     !default;
$infoBorder:           darken(adjust-hue($infoBackground, 10), 9%) !default;


//
// Alerts.
//

$alertPadding:          0.824em 2.25em 1em 1.15em                                              !default;
$alertBlockPadding:     0.824em 1.15em 1em                                                     !default;

$alertLineHeight:       1.5                              !default;
$alertHeadingMargin:    0.05em 0 0.25em                  !default;



// Component Variables
// =============================================================================

//
// Input placeholder text.
//

$placeholderText:    $grayLight !default;


//
// Navbar.
// 1. Base styles.
// 2. Link and text styles.
//

$navbarHeight:                     90px                          !default; // 1
$navbarFixedSideWidth:             228px                         !default; // 1
$navbarFontSize:                   14px                          !default; // 1
$navbarDesktopLinkSideSpacing:     1em                           !default; // 1
$navbarLinkFontWeight:             500                           !default; // 1
$navbarBackground:                 #2c3e50                       !default; // 1
$navbarLeftBoxShadow:              2px 0 4px rgba(0, 0, 0, 0.1)  !default; // 1
$navbarRightBoxShadow:             -2px 0 4px rgba(0, 0, 0, 0.1) !default; // 1

$navbarLinkColor:                  $white                        !default; // 2
$navbarLinkColorHover:             $navbarLinkColor              !default; // 2
$navbarLinkColorActive:            $gray                         !default; // 2
$navbarLinkBackgroundHover:        transparent                   !default; // 2
$navbarLinkBackgroundActive:       darken($navbarBackground, 3%) !default; // 2


//
// Dropdowns.
// 1. Base styles.
// 2. Positioning.
// 3. Links.
// 4. Dividers.
//

$dropdownBorder:                  1px solid rgba(0, 0, 0, 0.2)  !default; // 1
$dropdownPadding:                 1.75em                        !default; // 1
$dropdownBackground:              $white                        !default; // 1
$dropdownBoxShadow:               0 2px 5px rgba(0, 0, 0, 0.25) !default; // 1

$dropdownFirstSide:               100%                !default; // 2
$dropdownTop:                     -1.75em             !default; // 2
$dropdownOffset:                  calc(100% + 1.75em) !default; // 2

$dropdownLinkPadding:             0.5em 0                       !default; // 3
$dropdownLinkColor:               $navbarLinkColor              !default; // 3
$dropdownLinkColorActive:         $navbarLinkColorHover         !default; // 3
$dropdownLinkColorHover:          $navbarLinkColorHover         !default; // 3
$dropdownLinkBackgroundActive:    #f5f5f5                       !default; // 3
$dropdownLinkBackgroundHover:     $dropdownLinkBackgroundActive !default; // 3


//
// Tooltips and popovers.
//

$tooltipArrowWidth:         5px     !default;
$tooltipArrowColor:         #272727 !default;
$tooltipColor:              $white  !default;
$tooltipBackground:         #272727 !default;

$popoverArrowWidth:         10px                           !default;
$popoverArrowColor:         $white                         !default;
$popoverArrowOuterWidth:    $popoverArrowWidth + 1         !default;
$popoverArrowOuterColor:    rgba(0, 0, 0, 0.25)            !default;
$popoverBackground:         $white                         !default;
$popoverTitleBackground:    darken($popoverBackground, 3%) !default;


//
// Colophon.
//

$colophonBackground:    $navbarBackground !default;



// BuddyPress
// =============================================================================

$bpSpacingSm:         15px                                   !default;
$bpSpacingLg:         $bpSpacingSm * 3                       !default;
$bpCalcSpacingSm:     25px + $bpSpacingSm                    !default;
$bpCalcSpacingLg:     45px + $bpSpacingSm                    !default;
$bpBorderColor:       $shortcodeBorderColor                  !default;
$bpBorderWidth:       2px                                    !default;
$bpBorder:            $bpBorderWidth solid $bpBorderColor    !default;
$bpAccentColor:       #fafafa                                !default;
$bpNavSubnavColor:    rgba(0, 0, 0, 0.35)                    !default;



// Grid
// =============================================================================

//
// Grid columns.
//

$gridColumns:    12 !default;


//
// Fixed.
//

$gridColumnWidth:    20px                                                                        !default;
$gridGutterWidth:    52px                                                                        !default;
$gridRowWidth:       ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;


//
// Fluid.
//

$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth) !default;
$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth) !default;