/*
	stylus-boilerplate

	variables.styl

	Author: Sean Goresht

	Global, central variables, used throughout the boilerplate; feel free to update this file with your own variables
*/

/* Basic Configuration */
$resetEnabled ?= true
// allow a CSS rest to occur at the beginning of the resulting css file
$printStylesEnabled ?= true
// allow print styles for when someone prints your web page
/* Multipliers (used for ratios)
	TODO: Update with kouto's ratios
	@see: http://kouto-swiss.io/docs.html#modular-scale
*/
$multiplier ?= ks-golden
$multiplierLarge ?= $multiplier * ks-major-tenth
$multiplierSmall ?= $multiplier / $multiplierLarge

/* Grid */
$columns ?= 12
// you can extend grids with @extend $col-amount / ratio
$gridStyle ?= fluid
// percentages, and not fixed widths

/* Type */
$unit ?= 1em
// base unit for upsizing units (recommend em or rem)

/* Proportions */
$margin ?= $unit
$padding ?= $unit

// other padding variables such as $marginSmall, $paddingSmall and so forth: see helpers.styl

/* Icon Path */
$fontPath ?= "../assets/fonts/"
$iconFontPath ?= $fontPath + "icomoon/fonts/icomoon"


$baseFontSize ?= 100%
$baseFontFamily ?= font-stack("Segoe UI")
$headingFontFamily ?= "Segoe UI Light"
$fontSizeSmall ?= $unit / $multiplierSmall
$fontSizeMedium ?= $unit * $multiplier
$fontSizeLarge ?= $unit * $multiplierLarge
$fontSizeMini ?= $unit / $multiplierLarge
$lineHeight ?= ks-perfect-fifth
$headingFontWeight ?= 300
$baseFontWeight ?= 500
$borderRadius ?= ($unit / 3)
$borderRadiusSmall ?= $borderRadius / $multiplier
$borderRadiusLarge ?= $borderRadius * $multiplierLarge

/* Transitions*/
$transitionTime ?= 0.5s
$transitionFunction ?= easing("in-quad")

/* Animations */
$animationDuration ?= 1s
$animationTimingFunction ?= ease
$animationFillMode ?= both
$animationIterations ?= 1
$animationDirection ?= normal
$animationPlayState ?= running
$animationDelay ?= 2s
$delayElemCount ?= 10
// how many delayed placeholders to generate
/* =============================================================================
Colours
========================================================================== */
$textColour ?= #000000
$inverseTextColour ?= invert($textColour)
$primaryColour ?= #00A0DF
$colourVariations ?= extended-analagous($primaryColour)
$secondaryColour ?= $colourVariations[3]
$tertiaryColour ?= $colourVariations[6]
$bodyBackground ?= $inverseTextColour

/* Links */
$linkColour ?= luminosity($primaryColour) > 0.5 ? $primaryColour + 35:$primaryColour - 35
$linkVisitedColour ?= $primaryColour

/* =============================================================================
Borders
========================================================================== */
$borderWidth ?= 1px
$borderStyle ?= solid
$borderColour ?= transparentify((luminosity($textColour) > 0.5 ? white - 45:black + 45), 0.4)
$border ?= $borderWidth $borderStyle $borderColour

/* =============================================================================
Media query variables
========================================================================== */
$breakpointMain ?= only screen, max-width 767px
$breakpoint1080p ?= only screen, min-width 1920px

/* =============================================================================
Components
========================================================================== */

// navigation
$navPadding ?= 0
$navBackground ?= $primaryColour
$navItemLinkColour ?= luminosity($navBackground) > 0.5 ? black : white

$navItemDistribution ?= normal // normal, flex, table, or flex-table (flexbox with fallback)

$navItemPadding ?= $padding
$navItemMargin ?= 0
$navItemLinkPadding ?= $padding * 0.7

$navBorderWidth ?= $borderWidth
$navBorderStyle ?= $borderStyle
$navItemBorderColour ?= transparentify($navItemLinkColour, 0.3)

$navItemPreventWrap = false // prevent nav items from flowing to the other side
$navItemTransitionFunction ?= $transitionFunction
$navItemTransitionTime ?= $transitionTime

$navResponsive = true


// dropdowns

/* Dropdown */
$dropdownColour ?= $primaryColour
$dropdownSize ?= 8rem

/* Dropdown Menu Items */
$dropdownItemPadding ?= 1em
$dropdownItemMargin ?= 1em
$dropdownItemBorderColour ?= $dropdownColour + 35
$dropdownItemBorderWidth ?= 1px
$dropdownItemBorderStyle ?= solid

/* Dropdown caret */
$dropdownCaret ?= true
$dropdownCaretPosition ?= bottom
$dropdownCaretSize ?= 0.5em
$dropdownCaretColour ?= $dropdownColour

/* Transitions */
$dropdownTransitionTime ?= $transitionTime
$dropdownTransitionFunction ?= $transitionFunction

// buttons

$buttonBackground ?= $primaryColour
$buttonPadding ?= $padding * 0.8
$buttonFontSize ?= $unit
$buttonFontWeight ?= normal
$buttonMargin ?= $margin
$buttonBorder ?= 0

$buttonColours ?= {
	success: #00cc1c
	warning: #edff36
	info: #00abcc
	error: #cc0d00
}

$alertColours ?= {
	success: #00cc1c
	warning: #edff36
	info: #00abcc
	error: #cc0d00
}

$buttonTransition ?= 0.1s easing("in-quad") background, border