// =============================================================================
// _VARIABLES-DARK.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:                                        'dark'                                             !default;

$baseBoxShadow:                               inset 0 -0.125em 0.5em 0 rgba(0, 0, 0, 0.85),
                                              0 3px 2px -2px rgba(255, 255, 255, 0.075)          !default;
$baseShortcodeBoxShadow:                      inset 0 -0.125em 0.5em 0 rgba(0, 0, 0, 0.85),
                                              0 3px 2px -2px rgba(255, 255, 255, 0.075)          !default;
$baseBoxShadowNavbar:                         0 0.15em 0.35em 0 rgba(0, 0, 0, .475)              !default;
$baseBoxShadowAccent:                         rgba(255, 255, 255, 0.085)                         !default;
$baseModBackground:                           lighten($black, 7%)                                !default;
$siteBackground:                              lighten($baseModBackground, 4%)                    !default;
$siteBorderColor:                             rgba(0, 0, 0, 0.95)                                !default;
$siteBoxShadow:                               0 0 8px rgba(0, 0, 0, 0.575)                       !default;
$accentColor:                                 #ff2a13                                            !default;
$entryFeaturedBoxShadow:                      none                                               !default;
$widgetBorderColor:                           $black                                             !default;
$widgetBorderColorRgba:                       rgba(0, 0, 0, 0.95)                                !default;
$widgetLiABlockBorderColorRgba:               rgba(0, 0, 0, 0.95)                                !default;
$widgetBlockLinkBorder:                       1px solid $widgetBorderColor                       !default;
$widgetUlBackground:                          $baseModBackground                                 !default;
$widgetUlBoxShadow:                           inset 0 0 0.35em 0 rgba(0, 0, 0, 0.85),
                                              0 3px 2px -2px rgba(255, 255, 255, 0.075)          !default;
$widgetUlChildrenBoxShadow:                   inset 0 1px 0 0 rgba(255, 255, 255, 0.045)         !default;
$widgetLiBoxShadow:                           0 1px 0 0 rgba(255, 255, 255, 0.045)               !default;
$widgetLiABlockBoxShadow:                     0 1px 0 0 rgba(255, 255, 255, 0.045)               !default;
$widgetLiBackgroundHover:                     transparent                                        !default;
$widgetLiABlockFirstChildBorderTop:           $black                                             !default;
$widgetTextShadow:                            0 -1px 0 rgba(0, 0, 0, 0.95)                       !default;
$widgetbarBackground:                         $black                                             !default;
$widgetbarColor:                              #727272                                            !default;
$widgetNavMenuCurrentItemBackground:          transparent                                        !default;
$widgetLiABlockBackgroundHover:               transparent                                        !default;
$widgetWooButtonStyledBoxShadow:              none                                               !default;
$widgetWooButtonStyledBackgroundHover:        rgba(0, 0, 0, 0.15)                                !default;
$widgetWooLayeredNavChosenBackground:         transparent                                        !default;
$widgetWooLayeredNavCountBackground:          lighten($widgetUlBackground, 3%)                   !default;
$widgetWooLayeredNavCountBoxShadow:           inset 0 1px 3px rgba(0, 0, 0, 0.985)               !default;
$widgetWooPriceFilterSliderBoxShadow:         inset 0 1px 2px 0 rgba(0, 0, 0, 0.5),
                                              0 1px 0 0 rgba(255, 255, 255, 0.075)               !default;
$widgetWooPriceFilterHandleBackground:        lighten($baseModBackground, 15%)                   !default;
$widgetWooPriceFilterRangeBoxShadow:          inset 0 1px 3px 0 rgba(0, 0, 0, 0.5)               !default;
$widgetWooPriceFilterHandleBoxShadow:         0 1px 3px rgba(0, 0, 0, 0.95)                      !default;
$contentDockBoxShadow:                        0 0.085em 0.85em 0 rgba(0, 0, 0, 0.565)            !default;
$contentDockCloseColor:                       lighten($baseModBackground, 5%)                    !default;
$tagColor:                                    lighten($baseModBackground, 25%)                   !default;
$tagColorRgba:                                rgba(255, 255, 255, 0.2)                           !default;
$tagColorHover:                               lighten($baseModBackground, 40%)                   !default;
$tagColorHoverRgba:                           rgba(255, 255, 255, 0.825)                         !default;
$tagColorActive:                              $tagColorHover                                     !default;
$tagColorActiveRgba:                          $tagColorHoverRgba                                 !default;
$tagBorderColor:                              #070707                                            !default;
$tagBorderColorRgba:                          rgba(0, 0, 0, 0.785)                               !default;
$tagBorderColorHover:                         $black                                             !default;
$tagBorderColorHoverRgba:                     rgba(0, 0, 0, 1)                                   !default;
$tagBorderColorActive:                        $black                                             !default;
$tagBorderColorActiveRgba:                    rgba(0, 0, 0, 1)                                   !default;
$tagBackgroundColorHover:                     transparent                                        !default;
$tagBackgroundColorHoverRgba:                 rgba(0, 0, 0, 0.175)                               !default;
$tagBackgroundColorActive:                    darken($baseModBackground, 2%)                     !default;
$tagBackgroundColorActiveRgba:                rgba(0, 0, 0, 0.5)                                 !default;
$tagBoxShadow:                                0 1px 1px rgba(255, 255, 255, 0.075)               !default;
$tagBoxShadowActive:                          inset 0 1px 2px rgba(0, 0, 0, 0.95), $tagBoxShadow !default;
$tagTextShadow:                               0 1px 0 rgba(0, 0, 0, 0.5)                         !default;
$boxedEntryBorder:                            #050505                                            !default;
$headerLandmarkBackgroundColor:               $black                                             !default;
$headerLandmarkBackgroundColorRgba:           rgba(0, 0, 0, 0.75)                                !default;
$headerLandmarkBoxShadow:                     rgba(255, 255, 255, 0.0575)                        !default;
$headerLandmarkSubColor:                      #5b5b5b                                            !default;
$breadcrumbBackground:                        rgba(255, 255, 255, 0.05)                          !default;
$breadcrumbBorderBottom:                      rgba(0, 0, 0, 0.825)                               !default;
$breadcrumbTextShadow:                        0 1px 0 rgba(0, 0, 0, 0.95)                        !default;
$breadcrumbBoxShadow:                         rgba(255, 255, 255, 0.065)                         !default;
$commentAvatarBoxShadow:                      inset 0 1px 2px 1px rgba(0, 0, 0, 0.85),
                                              0 1px 0 0 rgba(255, 255, 255, 0.1)                 !default;
$commentNumberBoxShadow:                      0 2px 5px rgba(0, 0, 0, 0.55)                      !default;
$commentByPostAuthorTextShadow:               0 1px 0 rgba(0, 0, 0, 0.85)                        !default;
$colophonBoxShadow:                           inset 0 1px 0 0 rgba(255, 255, 255, 0.075)         !default;
$mejsButtonBorderColor:                       $baseModBackground                                 !default;
$mejsGradientTop:                             darken($white, 70%)                                !default;
$mejsGradientBottom:                          darken($white, 85%)                                !default;
$searchFormIconColor:                         $black                                             !default;
$paginationItemBoxShadow:                     inset 0 0 0 rgba(0, 0, 0, 0),
                                              inset 0 0.1em 0.45em 0 rgba(0, 0, 0, 0.85)         !default;
$paginationCurrentItemBoxShadow:              0 2px 7px 0 rgba(0, 0, 0, 0.65)                    !default;
$paginationItemTextShadow:                    0 -1px 1px rgba(0, 0, 0, 0.95)                     !default;
$dropdownCollapseLinkColorHover:              $white                                             !default;
$dropdownCollapseLinkBackgroundHover:         #050505                                            !default;
$thumbnailBackground:                         #090909                                            !default;
$thumbnailBoxShadow:                          inset 0 -2px 3px rgba(0, 0, 0, 0.45)               !default;
$shortcodeBoxShadowOuter:                     none                                               !default;
$shortcodeBoxShadowInner:                     inset 0 -0.125em 0.5em 0 rgba(0, 0, 0, 0.85),
                                              0 3px 2px -2px rgba(255, 255, 255, 0.075)          !default;
$shortcodeBorderColor:                        $black                                             !default;
$shortcodeBorderColorRgba:                    rgba(0, 0, 0, 1)                                   !default;
$shortcodeAccordionContentBackground:         #0c0c0c                                            !default;
$shortcodeAccordionBeforeColor:               lighten($baseModBackground, 15%)                   !default;
$shortcodeTabsContentBackground:              #0c0c0c                                            !default;
$shortcodeTabsContentBoxShadow:               inset 0 -0.125em 0.5em 0 rgba(0, 0, 0, 0.85),
                                              0 3px 2px -2px rgba(255, 255, 255, 0.075)          !default;
$shortcodeTabNavLinkColor:                    darken(#666, 20%)                                  !default;
$shortcodeTabNavLinkColorHover:               #666                                               !default;
$shortcodeTabNavLinkBackground:               $baseModBackground                                 !default;
$shortcodeTabNavLinkBoxShadow:                inset 0 1px 0 0 rgba(255, 255, 255, 0.05)          !default;
$shortcodeSkillBarWrapBackground:             #0c0c0c                                            !default;
$shortcodeSkillBarPercentageBackground:       rgba(255, 255, 255, 0.35)                          !default;
$shortcodeSkillBarPercentageTextShadow:       0 1px 0 rgba(255, 255, 255, 0.35)                  !default;
$shortcodeMapBackground:                      #0c0c0c                                            !default;
$shortcodeMapBoxShadow:                       inset 0 -1px 4px rgba(0, 0, 0, 0.65)               !default;
$shortcodePromptBackground:                   #0c0c0c                                            !default;
$shortcodePromoBackground:                    #0c0c0c                                            !default;
$shortcodePromoImgBorderBottom:               $black                                             !default;
$shortcodeResponsiveVideoBackground:          #0c0c0c                                            !default;
$shortcodeResponsiveVideoBoxShadow:           inset 0 -1px 3px rgba(0, 0, 0, 0.45)               !default;
$shortcodeColumnizeBorderColor:               darken($baseModBackground, 4%)                     !default;
$shortcodeCodeBackground:                     #0c0c0c                                            !default;
$shortcodeCodeBorder:                         $black                                             !default;
$shortcodeRecentPostsBackground:              #0c0c0c                                            !default;
$shortcodeSkillbarBoxShadow:                  inset 0 2px 3px rgba(0, 0, 0, 0.65)                !default;
$shortcodePricingTableColumnBoxShadow:        0 0 15px rgba(0, 0, 0, 0.725)                      !default;
$shortcodeCalloutBoxShadowOuter:              inset 0 -1px 3px 0 rgba(0, 0, 0, 0.65)             !default;
$shortcodeCalloutBoxShadowInner:              inset 0 1px 0 0 rgba(255, 255, 255, 0.035),
                                              0 1px 2px rgba(0, 0, 0, 0.45)                      !default;
$shortcodeTOCBackground:                      #0c0c0c                                            !default;
$shortcodeTOCBoxShadow:                       inset 0 -1px 3px rgba(0, 0, 0, 0.45)               !default;
$woocommerceQuantityButtonBackground:         lighten($baseModBackground, 10%)                   !default;
$woocommerceQuantityButtonBackgroundHover:    lighten($baseModBackground, 15%)                   !default;
$scrollTopColor:                              $white                                             !default;



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

$bodyBackground:    #25292a !default;
$textColor:         #666666 !default;



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

$linkColor:          $accentColor                                                                              !default;
$linkColorHover:     darken($linkColor, 15%)                                                                   !default;
$linkTransitions:    color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !default;



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

//
// Font families.
//

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


//
// Base styles.
//

$baseFontSize:      62.5%           !default;
$baseLineHeight:    1.7             !default;
$baseFontWeight:    300             !default;
$baseFontFamily:    $sansFontFamily !default;
$baseMargin:        1.313em         !default;


//
// Heading styles.
//

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



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

$tableBackground:    transparent                     !default;
$tableBorder:        lighten($baseModBackground, 5%) !default;



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

//
// Base button styling.
//

$btnIntegrityBackground:    $accentColor                         !default;
$btnIntegrityBorder:        darken($accentColor, 20%)            !default;



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

//
// Base form styling.
//

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


//
// Inputs.
//

$inputBackground:            lighten($baseModBackground, 7%) !default;
$inputBorder:                darken($baseModBackground, 2%)  !default;
$inputBorderFocus:           rgba(0, 0, 0, 0.85)             !default;
$inputBorderRadius:          4px                             !default;
$inputDisabledBackground:    $grayLighter                    !default;


//
// Box shadows.
//

$inputUneditableBoxShadow:    inset 0 1px 1px rgba(0, 0, 0, 0.075)                              !default;
$inputBoxShadowFocus:         inset 0 1px 1px rgba(0, 0, 0, 0.375), 0 0 8px rgba(0, 0, 0, 0.35) !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:          darken(#f1c40f, 25%)           !default;
// $warningBackground:    #0c0c0c                        !default;
// $warningBorder:        darken($baseModBackground, 8%) !default;

// $errorText:            darken(#e74c3c, 25%)           !default;
// $errorBackground:      #0c0c0c                        !default;
// $errorBorder:          darken($baseModBackground, 8%) !default;

// $successText:          darken(#2ecc71, 25%)           !default;
// $successBackground:    #0c0c0c                        !default;
// $successBorder:        darken($baseModBackground, 8%) !default;

// $infoText:             darken(#3498db, 25%)           !default;
// $infoBackground:       #0c0c0c                        !default;
// $infoBorder:           darken($baseModBackground, 8%) !default;

// $mutedText:            $gray                          !default;
// $mutedBackground:      #0c0c0c                        !default;
// $mutedBorder:          darken($baseModBackground, 8%) !default;

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

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

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

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

$mutedText:            $grayLight                !default;
$mutedBackground:      $grayLighter              !default;
$mutedBorder:          darken($grayLighter, 40%) !default;


//
// Alerts.
//

// $alertPadding:          0.786em 2.25em 1em 1.15em !default;
// $alertBlockPadding:     0.786em 1.15em 1em        !default;

// $alertBorderRadius:     4px                                                                        !default;
// $alertBoxShadow:        inset 0 -1px 4px rgba(0, 0, 0, 0.65), 0 1px 3px rgba(255, 255, 255, 0.075) !default;

// $alertLineHeight:       1.5                           !default;
// $alertHeadingMargin:    0.05em 0 0.25em               !default;
// $alertTextShadow:       0 1px 1px rgba(0, 0, 0, 0.85) !default;

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

$alertBorderRadius:     4px                                                                    !default;
$alertBoxShadow:        inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 7px rgba(0, 0, 0, 0.965) !default;

$alertLineHeight:       1.5                              !default;
$alertHeadingMargin:    0.05em 0 0.25em                  !default;
$alertTextShadow:       0 1px 0 rgba(255, 255, 255, 0.9) !default;



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

//
// Input placeholder text.
//

$placeholderText:    $grayLight !default;


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

$navbarHeight:                     90px                            !default; // 1
$navbarFixedSideWidth:             228px                           !default; // 1
$navbarFontSize:                   14px                            !default; // 1
$navbarDesktopLinkSideSpacing:     1.429em                         !default; // 1
$navbarLinkFontWeight:             500                             !default; // 1
$navbarBackground:                 $baseModBackground              !default; // 1
$navbarOuterBorder:                darken($baseModBackground, 25%) !default; // 1
$navbarLeftBoxShadow:              2px 0 4px rgba(0, 0, 0, 0.285)  !default; // 1
$navbarRightBoxShadow:             -2px 0 4px rgba(0, 0, 0, 0.285) !default; // 1

$navbarLinkColor:                  #bbb                          !default; // 2
$navbarLinkColorHover:             $white                        !default; // 2
$navbarLinkColorActive:            $gray                         !default; // 2
$navbarLinkBackgroundHover:        transparent                   !default; // 2
$navbarLinkBackgroundActive:       darken($navbarBackground, 3%) !default; // 2
$navbarTopLinkBoxShadowHover:      inset 0 4px 0 0 $accentColor  !default; // 2
$navbarLeftLinkBoxShadowHover:     inset 8px 0 0 0 $accentColor  !default; // 2
$navbarRightLinkBoxShadowHover:    inset -8px 0 0 0 $accentColor !default; // 2

$navbarBtnColor:                   $navbarLinkColor                                         !default; // 3
$navbarBtnColorCollapsed:          lighten($navbarLinkColor, 15%)                           !default; // 3
$navbarBtnBackground:              darken($navbarBackground, 0%)                            !default; // 3
$navbarBtnBackgroundHover:         darken($navbarBackground, 3%)                            !default; // 3
$navbarBtnTextShadow:              0 1px 1px rgba(0, 0, 0, 0.75)                            !default; // 3
$navbarBtnBoxShadow:               inset 0 0 0 rgba(0, 0, 0, 0), 0 1px 4px rgba(0, 0, 0, 1) !default; // 3
$navbarBtnBoxShadowHover:          inset 0 1px 4px rgba(0, 0, 0, 0.95)                      !default; // 3


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

$dropdownBorder:                 1px solid rgba(0, 0, 0, 0.2)  !default; // 1
$dropdownPadding:                0.75em 0                      !default; // 1
$dropdownBackground:             $baseModBackground            !default; // 1
$dropdownBoxShadow:              0 2px 4px rgba(0, 0, 0, 0.95) !default; // 1

$dropdownFirstSide:              94%     !default; // 2
$dropdownTop:                    -0.75em !default; // 2
$dropdownOffset:                 98%     !default; // 2

$dropdownLinkPadding:            0.5em 1.6em           !default; // 3
$dropdownLinkColor:              $navbarLinkColor      !default; // 3
$dropdownLinkColorHover:         $navbarLinkColorHover !default; // 3
$dropdownLinkBackgroundHover:    rgba(0, 0, 0, 0.575)  !default; // 3


//
// Tooltips and popovers.
//

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

$popoverArrowWidth:         10px                            !default;
$popoverArrowColor:         lighten($baseModBackground, 9%) !default;
$popoverArrowOuterWidth:    $popoverArrowWidth + 1          !default;
$popoverArrowOuterColor:    rgba(0, 0, 0, 0.25)             !default;
$popoverBackground:         lighten($baseModBackground, 9%) !default;
$popoverTitleBackground:    darken($popoverBackground, 6%)  !default;


//
// Colophon.
//

$colophonBackground:        $baseModBackground                         !default;
$colophonBorderTopRgba:     rgba(0, 0, 0, 0.75)                        !default;
$colophonFirstBorder:       $navbarOuterBorder                         !default;
$colophonFirstBoxShadow:    inset 0 1px 0 0 rgba(255, 255, 255, 0.075) !default;



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

$bpSpacingSm:         15px                                       !default;
$bpSpacingLg:         $bpSpacingSm * 3                           !default;
$bpCalcSpacingSm:     25px + $bpSpacingSm                        !default;
$bpCalcSpacingLg:     45px + $bpSpacingSm                        !default;
$bpBorderColor:       $shortcodeBorderColor                      !default;
$bpBorderWidth:       1px                                        !default;
$bpBorder:            $bpBorderWidth solid $bpBorderColor        !default;
$bpBoxShadowOuter:    0 1px 2px rgba(0, 0, 0, 0.35)              !default;
$bpBoxShadowInner:    inset -1px -1px rgba(255, 255, 255, 0.025) !default;
$bpAccentColor:       #0c0c0c                                    !default;
$bpNavSubnavColor:    rgba(255, 255, 255, 0.1)                   !default;



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

//
// Grid columns.
//

$gridColumns:    12 !default;


//
// Fixed.
//

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


//
// Fluid.
//

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