// BREAKPOINTS
// ---------------------------------------------------------------------------
$sm: 768px !default;
$md: 1024px !default;
$lg: 1200px !default;


// WIDTH
// ---------------------------------------------------------------------------
$w-small: 480px !default;
$w-medium: 600px !default;
$w-big: 740px !default;
$w-large: 840px !default;


// Z-INDEX
// ---------------------------------------------------------------------------
$z-over-content: 100 !default;
$z-over-control: 200 !default;
$z-over-page: 300 !default;
$z-over-screen: 400 !default;
$z-over-all: 500 !default;


// GRID
// ---------------------------------------------------------------------------
$grid-columns: 12 !default;
$grid-gutter: 2% !default;


// FONT FAMILY
// ---------------------------------------------------------------------------
$text-font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif !default;
$monospace-font-family: Consolas, Monaco, 'Courier New', monospace !default;
$headings-font-family: $text-font-family !default;
$buttons-font-family: $text-font-family !default;
$input-font-family: $text-font-family !default;


// COLORS
// ---------------------------------------------------------------------------

// Text
$color-text: #313439 !default;
$color-headings: #0d0d0e !default;

// Links
$color-link: #3794de !default;
$color-link-hover: #f03c69 !default;

// Button
$color-button-primary: #1c86f2 !default;
$color-button-primary-text: #fff !default;
$color-button-secondary: #313439 !default;
$color-button-secondary-text: #fff !default;

// States
$color-error: #f03c69 !default;
$color-success: #35beb1 !default;
$color-warning: #f7ba45 !default;
$color-focus: #1c86f2 !default;

// Extra
$color-inverted: #fff !default;
$color-highlight: #edf2ff !default; // color-focus 15% opacity

// Grayscale
$color-black: #0d0d0e !default;
$color-darkgray: #313439 !default;
$color-midgray: #676b72 !default;
$color-gray: #bdbdbd !default;
$color-lightgray: #d4d4d4 !default;
$color-silver: #e0e1e1 !default;
$color-aluminum: #f8f8f8 !default;


// TEXT
// ---------------------------------------------------------------------------

// Font Size
$font-size: 16px !default;
$font-size-smaller: $font-size - 4px !default;
$font-size-small: $font-size - 2px !default;
$font-size-big: $font-size + 2px !default;
$font-size-large: $font-size + 4px !default;

// Baseline
$base-line: 24px !default;
$base-line-smaller: 20px !default;
$base-line-small: 20px !default;
$base-line-big: 28px !default;
$base-line-large: 32px !default;

// Margin
$text-margin-bottom: $font-size !default;


// HEADINGS
// ---------------------------------------------------------------------------

// Font Size
// By default: 60, 48, 36, 24, 21, 18, 16
$heading-font-size-title: 60px !default;
$heading-font-size-1: 48px !default;
$heading-font-size-2: 36px !default;
$heading-font-size-3: 24px !default;
$heading-font-size-4: 21px !default;
$heading-font-size-5: 18px !default;
$heading-font-size-6: 16px !default;

// Baseline
$heading-base-line-title: 64px !default;
$heading-base-line-1: 52px !default;
$heading-base-line-2: 40px !default;
$heading-base-line-3: 32px !default;
$heading-base-line-4: 32px !default;
$heading-base-line-5: 28px !default;
$heading-base-line-6: 24px !default;

// Margin
$heading-margin-bottom: $font-size !default;


// TABLES
// ---------------------------------------------------------------------------

// Font Size
$table-font-size: $font-size - 1px !default;

// Baseline
$table-base-line: 24px !default;

// Padding
$table-padding-tb: 1rem !default;
$table-padding-rl: 1rem !default;

// Border
$table-border: 1px solid rgba(0, 0, 0, .05) !default;

// Striped
$table-background-striped: $color-aluminum !default;


// BUTTONS
// ---------------------------------------------------------------------------

// Font Size
$button-font-size: 15px !default;
$button-font-size-smaller: $button-font-size - 4px !default;
$button-font-size-small: $button-font-size - 2px !default;
$button-font-size-big: $button-font-size + 2px !default;
$button-font-size-large: $button-font-size + 4px !default;

// Baseline
$button-base-line: 20px !default;

// Height
$button-height: 40px !default;
$button-height-small: 36px !default;
$button-height-big: 48px !default;
$button-height-large: 56px !default;

// Padding
$button-padding-tb: 8px !default;
$button-padding-rl: 20px !default;
$button-padding-small-tb: 6px !default;
$button-padding-small-rl: 20px !default;
$button-padding-big-tb: 13px !default;
$button-padding-big-rl: 24px !default;
$button-padding-large-tb: 20px !default;
$button-padding-large-rl: 36px !default;

// Weight
$button-font-weight: 500 !default;

// Radius
$button-border-radius: 3px !default;


// INPUTS
// ---------------------------------------------------------------------------

// Font Size
$input-font-size: 15px !default;
$input-font-size-smaller: $input-font-size - 4px !default;
$input-font-size-small: $input-font-size - 2px !default;
$input-font-size-big: $input-font-size + 2px !default;
$input-font-size-large: $input-font-size + 4px !default;

// Baseline
$textarea-base-line: $base-line !default;

// Height
$input-height: 40px !default;
$input-height-small: 36px !default;
$input-height-big: 48px !default;
$input-height-large: 56px !default;

// Padding
$input-padding-rl: 12px !default;
$input-padding-small-rl: 12px !default;
$input-padding-big-rl: 12px !default;
$input-padding-large-rl: 12px !default;
$input-textarea-padding-tb: 8px !default;

// States
$input-border-width: 1px !default;
$input-border-color: $color-lightgray !default;
$input-background-color: #fff !default;
$input-box-shadow: none !default;

$input-focus-background-color: #fff !default;
$input-focus-border-color: $color-focus !default;
$input-focus-box-shadow: 0 0 1px $color-focus inset !default;

$input-error-background-color: $color-error !default;
$input-error-border-color: $color-error !default;
$input-error-focus-box-shadow: 0 0 1px $color-error inset !default;

$input-success-background-color: $color-success !default;
$input-success-border-color: $color-success !default;
$input-success-focus-box-shadow: 0 0 1px $color-success inset !default;

$input-disabled-opacity: .6;
$input-disabled-color: rgba(0, 0, 0, .5);

// Radius
$input-border-radius: 3px !default;


// OVERLAY
// ---------------------------------------------------------------------------
$overlay-background-color: rgba(#fff, .95);
@mixin breakpoint($min: 0, $max: 0) {

    $type: type-of($min);

    @if $type == string
    {
        @if $min == sm
        {
            @media (max-width: $sm) { @content; }
        }
        @else if $min == md
        {
            @media (min-width: $sm) and (max-width: $md) { @content; }
        }
        @else if $min == lg
        {
            @media (min-width: $lg) { @content; }
        }
    }
    @else if $type == number
    {
        $query: "all" !default;
        @if $min != 0 and $max != 0 { $query: "(min-width: #{$min}) and (max-width: #{$max})"; }
        @else if $min != 0 and $max == 0 { $query: "(min-width: #{$min})"; }
        @else if $min == 0 and $max != 0 { $query: "(max-width: #{$max})"; }
        @media #{$query} { @content; }
    }
}
// Text
@mixin text-font($font) {
    body {
        font-family: #{$font};
    }
}

// Headings
@mixin headings-font($font) {
    h1.title, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        font-family: #{$font};
    }
}

// Buttons
@mixin buttons-font($font) {
    button, .button {
        font-family: #{$font};
    }
}

// Inputs
@mixin inputs-font($font) {
    input, textarea, select {
        font-family: #{$font};
    }
}
// display
@mixin flex {
	display: flex;
}

// basis
@mixin flex-basis($width) {
	flex-basis: $width;
}

// items wrap
@mixin flex-items-wrap {
	flex-wrap: wrap;
}

// items nowrap
@mixin flex-items-nowrap {
	flex-wrap: nowrap;
}

// items row
@mixin flex-items-row {
    flex-direction: row;
}

// items columns
@mixin flex-items-column {
    flex-direction: column;
}

// items left
@mixin flex-items-left {
    justify-content: flex-start;
}

// items right
@mixin flex-items-right {
    justify-content: flex-end;
}

// items center
@mixin flex-items-center {
	justify-content: center;
}

// items between
@mixin flex-items-space-between {
	justify-content: space-between;
}

// items around
@mixin flex-items-space-around {
	justify-content: space-around;
}

// items vertical top
@mixin flex-items-top {
    align-items: flex-start;
}

// items vertical middle
@mixin flex-items-middle {
	align-items: center;
}

// items vertical bottom
@mixin flex-items-bottom {
    align-items: flex-end;
}

// item grow
@mixin flex-item-grow($grow: 0) {
    flex-grow: $grow;
}


// item auto
@mixin flex-item-auto {
    flex: auto;
}

// item one
@mixin flex-item-one {
    flex: 1;
}

// item shrink
@mixin flex-item-shrink($num: 0) {
	flex-shrink: $num;
}

// item width
@mixin flex-item-width($width) {
	flex: 0 0 $width;

	@include breakpoint(sm) {
        flex: 0 0 100% !important;
    }
}
// Make Row
@mixin grid-row {
    @include flex;
    @include flex-items-row;
    @include flex-items-wrap;

    @include breakpoint(sm) {
        @include flex-items-column;
        @include flex-items-nowrap;
    }
}

// Generate Columns
@mixin generate-grid-columns {

    @for $i from 1 through $grid-columns
    {
        .col-#{$i} {
            width: 100% / $grid-columns * $i;
        }
        .offset-#{$i} {
            $width: 100% / $grid-columns * $i;
            margin-left: $width;
        }

    }

    .gutters {
        @for $i from 1 through $grid-columns
        {
            & > .col-#{$i} {
                $width: 100% / $grid-columns * $i;
                width: calc(#{$width} - #{$grid-gutter});
            }
            & > .offset-#{$i} {
                $width: 100% / $grid-columns * $i;
                margin-left: calc(#{$width} + #{$grid-gutter}) !important;
            }
        }
    }
}


// Grid Media Columns
@mixin grid-media-columns($num) {

	-webkit-column-count: $num;
	-moz-column-count: $num;
	column-count: $num;

	-webkit-column-gap: $grid-gutter;
	-moz-column-gap: $grid-gutter;
	column-gap: $grid-gutter;

	& > div {
		display: inline-block;
		width: 100%;
	}

    @include breakpoint(sm) {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
    }
}
// Clearfix
@mixin clearfix {
    &:after {
        content: '';
        display: table;
        clear: both;
    }
}

// Transition
@mixin transition($transition: all linear .2s) {
    -moz-transition: $transition;
    transition: $transition;
}

// transform
@mixin transform($transforms) {
    -moz-transform: $transforms;
    -ms-transform: $transforms;
    -webkit-transform: $transforms;
    transform: $transforms;
}

// blur
@mixin blur($radius) {
    -webkit-filter: blur($radius);
    -moz-filter: blur($radius);
    -ms-filter: blur($radius);
    filter: blur($radius);
}

// striped
@mixin striped($color: rgba(255, 255, 255, .2), $angle: 45deg) {
    background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
    background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
}

// animation
@mixin animation($animation) {
    -webkit-animation: $animation;
    -moz-animation: $animation;
    animation: $animation;
}


// Retina Images
@mixin retina-background-image($file, $type, $width:  auto, $height:  auto) {

    background-repeat: no-repeat;
    background-image: url($file + '.' + $type);

    @media
      only screen and (-webkit-min-device-pixel-ratio: 2),
      only screen and (min--moz-device-pixel-ratio: 2),
      only screen and (-o-min-device-pixel-ratio: 2/1),
      only screen and (min-device-pixel-ratio: 2),
      only screen and (min-resolution: 192dpi),
      only screen and (min-resolution: 2dppx) {
        background-image: url($file + '-2x.' + $type);
        background-size: $width $height;
    }
}
@mixin button($color-text, $color-back)
{
	color: $color-text;
	background-color: $color-back;

	&:hover {
	    color: $color-text;
	    background-color: lighten($color-back, 20%);
	}
    &:disabled,
    &.disabled {
	    color: rgba($color-text, .7);
	    background-color: rgba($color-back, .7);
    }
    &.outline {
        background: none;
        color: $color-back;
        border-color: $color-back;

        &:hover {
            color: rgba($color-back, .6);
            border-color: rgba($color-back, .5);
        }
        &:disabled,
        &.disabled {
            background: none;
    	    color: rgba($color-back, .7);
    	    border-color: rgba($color-back, .5);
        }
    }
}
// vertical
@mixin gradient-vertical($start: #555, $end: #333) {
	background-color: $start;
	background-image: linear-gradient(to bottom, $start 0%, $end 100%);
}

// vertical to opacity
@mixin gradient-vertical-to-opacity($color, $opacity: 0) {
	$rgba: rgba(red($color), green($color), blue($color), $opacity);
	background: linear-gradient(to bottom, $color 0%, $rgba 100%);
}

// horizontal
@mixin gradient-horizontal($start: #555, $end: #333) {
    background-color: $start;
    background: linear-gradient(to right, $start 0%, $end 100%);
}

// horizontal to opacity
@mixin gradient-horizontal-to-opacity($color: #555, $opacity: 0) {
    $rgba: rgba(red($color), green($color), blue($color), $opacity);
    background: linear-gradient(to right, $color 0%, $rgba 100%);
}

// radial
@mixin gradient-radial($inner: #555, $outer: #333) {
	background-image: radial-gradient(circle, $inner, $outer);
}
@mixin label($text, $back) {
    background: $back;
    color: $text;

    &.tag,
    &.outline {
        background: none;
        border-color: $back;
        color: $back;
    }
}