/*

Base Dimensions

    $base-border-radius:            4px     # Border radius used as a standard on all elements.
    $horizontal-offset:             180px   # Labels width in horizontal forms.

Styleguide 31

*/


$base-border-radius:                4px                                                                     !default;
$horizontal-offset:                 180px                                                                   !default;

/*

Text Size

Font sizes you can used with the compass mixin `adjust-font-size-to()`. Naming convention from [Inuit](http://inuitcss.com/).

    $giga-size:                     $base-font-size * 7     # 98px
    $mega-size:                     $base-font-size * 5     # 70px
    $kilo-size:                     $base-font-size * 3.5   # 49px

    $h1-size:                       $base-font-size * 2.5   # 35px
    $h2-size:                       $base-font-size * 2     # 28px
    $h3-size:                       $base-font-size * 1.85  # 26px
    $h4-size:                       $base-font-size * 1.5   # 21px
    $h5-size:                       $base-font-size * 1.25  # 17.5px
    $h6-size:                       $base-font-size * 1     # 14px

    $small-size:                    $base-font-size * .85   # 12px
    $smaller-size:                  $base-font-size * .7    # 10px
    $smallest-size:                 $base-font-size * .5    # 7px

Styleguide 31.1

*/

$biggest-size:                      $base-font-size * 7                                                     !default;
$bigger-size:                       $base-font-size * 5                                                     !default;
$big-size:                          $base-font-size * 3.5                                                   !default;

$h1-size:                           $base-font-size * 2.5                                                   !default;
$h2-size:                           $base-font-size * 2                                                     !default;
$h3-size:                           $base-font-size * 1.85                                                  !default;
$h4-size:                           $base-font-size * 1.5                                                   !default;
$h5-size:                           $base-font-size * 1.25                                                  !default;
$h6-size:                           $base-font-size * 1                                                     !default;

$small-size:                        $base-font-size * .85                                                   !default;
$smaller-size:                      $base-font-size * .7                                                    !default;
$smallest-size:                     $base-font-size * .5                                                    !default;

// Backward compatibility

$giga-size:                         $biggest-size                                                           ;
$mega-size:                         $bigger-size                                                            ;
$kilo-size:                         $big-size                                                               ;
$milli-size:                        $small-size                                                             ;
$micro-size:                        $smaller-size                                                           ;

/*

Line-Height

By default all titles have a line-height based on the font-size, to ensure that it will allways respect the vertical rhythm.
Sometimes this result is not what we expect/want so it's possible to override the default proportion width these.

These values mean: n times the base line-height.

    $h1-line-height:                2
    $h2-line-height:                2
    $h3-line-height:                2
    $h4-line-height:                1.5
    $h5-line-height:                1.5
    $h6-line-height:                1.5

Styleguide 31.1.1

*/

$h1-line-height:                    2                                                                       !default;
$h2-line-height:                    2                                                                       !default;
$h3-line-height:                    2                                                                       !default;
$h4-line-height:                    1.5                                                                     !default;
$h5-line-height:                    1.5                                                                     !default;
$h6-line-height:                    1.5                                                                     !default;

/*

Forms

Base padding and margins used in the forms.

    $control-margin-bottom:         $base-line-height
    $label-margin-bottom:           10px    # Margin below labels
    $input-border:                  1px     # Border width used for inputs and buttons
    $input-padding-top:             10px    # Base top padding
    $input-padding-side:            10px    # Base side padding
    $checkbox-padding-left:         20px    # Side padding used for checkboxes and radios

Styleguide 31.2

*/

$control-margin-bottom:             $base-line-height                                                       !default;
$label-margin-bottom:               10px                                                                    !default;
$input-border:                      1px                                                                     !default;
$input-padding-top:                 10px                                                                    !default;
$input-padding-side:                10px                                                                    !default;
$checkbox-padding-left:             20px                                                                    !default;

// Do · not · edit
$input-padding:                     em($input-padding-top) em($input-padding-side)                                  ;
$input-height:                      em($base-font-size + ($input-padding-top * 2) + ($input-border * 2))            ;
$control-min-height:                em($base-line-height + $label-margin-bottom) + $input-height - em(5px)          ;


/*

Paddings

Padding specific to every component you can use to overwrite the base padding.

Helper classes

    $wrapper-padding:               20px    # Side padding used with .w and .wrapper

Buttons

    $btn-padding:                   $input-padding  # Buttons padding
    $btn-large-padding:             em($input-padding-top * 1) em($input-padding-side * 1.5)
    $btn-small-padding:             em($input-padding-top * .5) em($input-padding-side * .8)
    $btn-mini-padding:              em($input-padding-top * .1) em($input-padding-side * .6)

Components

    $alerts-padding:                $input-padding  # Alerts padding
    $captions-padding:              $input-padding  # Captions padding
    $dropdowns-padding:             $input-padding  # Dropdowns padding
    $modals-error-padding:          $input-padding  # Modals padding
    $navs-padding:                  $input-padding  # Navs padding
    $pager-padding:                 $input-padding  # Pager padding
    $pagination-padding:            $input-padding  # Pagination padding
    $pills-padding:                 .15em .35em     # Pills padding
    $tables-padding:                $input-padding  # Tables padding
    $tabs-content-padding:          $input-padding  # Tabs padding
    $tabs-tab-padding:              $input-padding  # Tabs padding
    $tooltips-padding:              $input-padding  # Tooltips padding
    $picker-padding:                1em 1em         # Date picker padding


Styleguide 31.3

*/


// Helper classes
$wrapper-padding:                   20px                                                                    !default;

// Buttons
$btn-padding:                       $input-padding                                                          !default;
$btn-large-padding:                 em($input-padding-top * 1) em($input-padding-side * 1.5)                !default;
$btn-small-padding:                 em($input-padding-top * .5) em($input-padding-side * .8)                !default;
$btn-mini-padding:                  em($input-padding-top * .1) em($input-padding-side * .6)                !default;

// Components
$alerts-padding:                    $input-padding                                                          !default;
$captions-padding:                  $input-padding                                                          !default;
$dropdowns-padding:                 $input-padding                                                          !default;
$modals-error-padding:              $input-padding                                                          !default;
$navs-padding:                      $input-padding                                                          !default;
$pager-padding:                     $input-padding                                                          !default;
$pagination-padding:                $input-padding                                                          !default;
$pills-padding:                     .15em .35em                                                             !default;
$tables-padding:                    $input-padding                                                          !default;
$tabs-content-padding:              $input-padding                                                          !default;
$tabs-tab-padding:                  $input-padding                                                          !default;
$tooltips-padding:                  $input-padding                                                          !default;
$picker-padding:                    1em 1em                                                                 !default;


/*

Sizes

    $loader-ico-size:               44px        # Icon size of the loader used with some componets
    $modal-btn-size:                30px        # Size of buttons used with the modals
    $slider-btn-size:               30px        # Size of buttons used with the sliders
    $tooltip-triangle-size:         15px        # Size the tooltip's triangle

Styleguide 31.4

*/

$loader-ico-size:                   44px                                                                    !default;
$modal-btn-size:                    30px                                                                    !default;
$slider-btn-size:                   30px                                                                    !default;
$tooltip-triangle-size:             14px                                                                    !default;

/*

Widths

    $dropdowns-width:                160px       # max-width of dropdowns
    $tooltips-width:                 200px       # max-width of tooltips

Styleguide 31.5

*/

$dropdowns-width:                   160px                                                                   !default;
$tooltips-width:                    200px                                                                   !default;


/*

Heights

Some elements need to have a max-height specified for smoother animations, like dropdowns:

    $dropdowns-height:              600px

Styleguide 31.6

*/


$dropdowns-height:                  600px                                                                   !default;

/*

Media Queries

Set the width of the three steps of the layout.

    $lap-start:                     481px       # Max width of smartphone
    $desk-start:                    768px       # Max width for tablet
    $desk-end:                      1080px      # Max width for desktop

Styleguide 31.7

*/


$lap-start:                         481px                                                                   !default;
$desk-start:                        768px                                                                   !default;
$desk-end:                          1080px                                                                  !default;

$palm-end:                          $lap-start - 1px;
$lap-end:                           $desk-start - 1px;

/*

Grid (Susy)

Default settings for susy grid. More info: [Susy](http://susy.oddbird.net/).

    $total-columns:                 12          # Number of columns
    $column-width:                  50px        # Columns width
    $gutter-width:                  30px        # Gutter width
    $container-style:               fluid       # Grid style

Styleguide 31.8

*/


$total-columns:                     12                                                                      !default;
$column-width:                      50px                                                                    !default;
$gutter-width:                      30px                                                                    !default;
$container-style:                   fluid                                                                   !default;

/*

Off-Canvas Options

    $offcanvas-width:              300px        # Width of the sidebar
    $offcanvas-direction:          left         # On what side appear
    $offcanvas-dim:                true         # Dim over the content on open
    $offcanvas-effect:             slide        # cover, reveal, push, slide

Styleguide 15.1

*/


$offcanvas-width:                   300px                                                                   !default;
$offcanvas-direction:               left                                                                    !default;
$offcanvas-dim:                     true                                                                    !default;
$offcanvas-effect:                  slide                                                                   !default;

/*

Z-index

Default settings for overlay components, taken from Bootstrap.

    $zindex-offcanvas:              990         # OffCanvas
    $zindex-dropdown:               1000        # Dropdowns
    $zindex-popover:                1010        # Popovers
    $zindex-tooltip:                1030        # Tooltips
    $zindex-slider:                 1040        # Sliders
    $zindex-modal:                  1050        # Modals

Styleguide 31.9

*/


$zindex-offcanvas:                  990                                                                     !default;
$zindex-dropdown:                   1000                                                                    !default;
$zindex-popover:                    1010                                                                    !default;
$zindex-tooltip:                    1030                                                                    !default;
$zindex-slider:                     1040                                                                    !default;
$zindex-modal:                      1050                                                                    !default;