/* ====================================================================================================================

Default Styles

One of the main reason of the existence of Rapido is because I wanted to separate pure framework code form styling.
Every component refer to a silent class from `_default-style.scss`.

These are all the classes available by default, others can be added or removed based on what component you want
to enable or disable.

Styleguide 30

==================================================================================================================== */

@if $default-styles {

/* --------------------------------------------------------------------------------------------------------------------

Titles

    %h1                             # For <h1>
    %h2                             # For <h2>
    %h3                             # For <h3>
    %h4                             # For <h4>
    %h5                             # For <h5>
    %h6                             # For <h6>

Styleguide 30.1

-------------------------------------------------------------------------------------------------------------------- */

	%h1 {}
	%h2 {}
	%h3 {}
	%h4 {}
	%h5 {}
	%h6 {}

/* --------------------------------------------------------------------------------------------------------------------

Inputs and Selects

    %input                          # For the <input> and <textarea>
    %input-addon                    # For the addon texts in forms
    %select                         # Custom select style, by default it use %input

Styleguide 30.2

-------------------------------------------------------------------------------------------------------------------- */

	%input {
		border-color: $gray;
		background-color: $grayLighter;
		@include box-shadow(inset 0 1px 0 #fff);
		@include background-image(linear-gradient(bottom, $white 0%, $grayLighter 100%));

		&:focus {
			@include background-image(linear-gradient(bottom, $white 50%, $grayLighter 100%));
		}
	}

	%input-addon {
		color: $text-color;
		border-color: $grayLight;
		background-color: $grayLighter;
	}

    %select {
        @extend %input;
    }

/* --------------------------------------------------------------------------------------------------------------------

Buttons

    %btn--default                   # Default button colors
    %btn--primary                   # Default color for primary buttons
    %btn--secondary                 # Default color for secondary buttons
    %btn--scripts                   # Default buttons color for buttons used in scripts (slides, modals)

    %btn__disabled                  # For disabled button
    %btn__current                   # For current button (es. used in Pagination)

Styleguide 30.3

-------------------------------------------------------------------------------------------------------------------- */

    // Default
	%btn--default {
		color: $text-color;
		border-color: $gray;
		background-color: $grayLight;
		@include box-shadow(inset 0 1px 0 rgba(255,255,255,.5));
		@include background-image(linear-gradient(bottom, $grayLight 0%, $grayLighter 100%));

		// Hover/focus state
		&:hover,
		&.hover,
		&:focus {
			color: inherit;
			@include background-image(linear-gradient(bottom, $grayLight 0%, $white 100%));
		}

		// Active state
		&.active,
		&:active {
			@include background-image(linear-gradient(top, $grayLight 0%, $grayLighter 100%));
		}
	}

	%btn__disabled {
		color: $grayLight;
		border-color: $grayLight;
		background: #FFF;
	}

	%btn__current {
		@include box-shadow(0 0 0);
		background: $gray;
		color: $white;
	}

	%btn--primary {
		color: #fff;
		border-color: darken(green, 10%);
		background-color: green;
		@include background-image(linear-gradient(bottom, darken(green, 10%) 0%, green 100%));

		// Hover/focus state
		&:hover,
		&.hover,
		&:focus {
			color: #fff;
			@include background-image(linear-gradient(bottom, darken(green, 10%) 0%, lighten(green, 6) 100%));
		}

		// Active state
		&.active,
		&:active {
			@include background-image(linear-gradient(top, darken(green, 10%) 0%, green 100%));
		}
	}

	%btn--secondary {
		color: #fff;
		border-color: darken(red, 10%);
		background-color: red;
		@include background-image(linear-gradient(bottom, darken(red, 10%) 0%, red 100%));

		// Hover/focus state
		&:hover,
		&.hover,
		&:focus {
			color: #fff;
			@include background-image(linear-gradient(bottom, darken(red, 10%) 0%, lighten(red, 20) 100%));
		}

		// Active state
		&.active,
		&.hover,
		&:active {
			@include background-image(linear-gradient(bottom, darken(red, 10%) 0%, red 100%));
		}
	}

    // Generic style for buttons For the scripts
	%btn--scripts {
		@include alpha-color(#000, .6, background);
		color: #fff;
		cursor: pointer;
		display: block;
		text-align: center;
		text-decoration: none;

		&:hover {
			color: #fff;
			@include alpha-color(#000, .8, background);
		}
	}


/* --------------------------------------------------------------------------------------------------------------------

Captions

    %caption                        # Used for the captions in .caption and modals

Styleguide 30.4

-------------------------------------------------------------------------------------------------------------------- */

	%caption {
		@include alpha-color(#000, .8, background);
		color: #fff;
		padding: $captions-padding;
	}

/* --------------------------------------------------------------------------------------------------------------------

Labels (Badges & Pills)

    %pill                           # For the .badge and .pill

Styleguide 30.5

-------------------------------------------------------------------------------------------------------------------- */

	%pill {
		@include alpha-color(#000, .35);
		color: $white;
	}

/* --------------------------------------------------------------------------------------------------------------------

Dropdowns

    %dropdown                       # For the dropdown's list
    %dropdown--open                 # For the drodpown button in .open state

Styleguide 30.6

-------------------------------------------------------------------------------------------------------------------- */



	%dropdown {
		background: $grayLighter;
		border-color: $gray;

		.divider { @include nav-divider($gray); margin-top: -1px }

		> li > a,
		> li > label { border-bottom: 1px dotted $gray; }

		> li > a:hover,
		> li > a:focus {
			text-decoration: none;
			background-color: $grayLight;
		}
	}

	%dropdown--open {
		background: $grayLighter;
		border-bottom: 1px solid $grayLighter;
	}


/* --------------------------------------------------------------------------------------------------------------------

Tables

    %table--bordered                # For .table--bordered
    %table--striped                 # For .table--striped
    %table--hover                   # For .table--hover
    %table--sortable                # For .table--sortable

Styleguide 30.7

-------------------------------------------------------------------------------------------------------------------- */



	%table--bordered {
		thead {
			th, td {
				background-color: $gray;
				color: #FFF;
			}
		}
		tbody {
			td { border-bottom: 1px solid $grayLight; }
		}
	}

	%table--striped { background-color: $grayLighter;}

	%table--hover { background-color: $grayLighter;}

	%table--sortable {
		thead {
			th {
				&:hover {background: $grayDark }
				&.sorting-asc:after {content: "\25BC"; }
				&.sorting-desc:after {content: "\25B2";}
			}
		}
	}

/* --------------------------------------------------------------------------------------------------------------------

Navs

    %nav--btn                       # For links in navs with .nav--btn
    %nav--btn__hover                # For the :hover state of %nav--btn
    %nav--btn__current              # For the current selected link
    %nav--btn__disabled             # For the disabled links

Styleguide 30.8

-------------------------------------------------------------------------------------------------------------------- */

	%nav--btn {}

	%nav--btn__hover { background-color: $grayLighter;}

	%nav--btn__active {
		color: $white;
		background-color: $link-color;
	}

	%nav--btn__disabled {color: $grayLight;}


/* --------------------------------------------------------------------------------------------------------------------

Breadcrumbs

    %breadcrumbs                     # Base style of breadcrumbs
    %breadcrumbs__current            # For the current selected link

Styleguide 30.9

-------------------------------------------------------------------------------------------------------------------- */

	%breadcrumbs {
		> li {
			&:after {
				color: #ccc;
				content: "›";
				padding: 0 10px;
			}
			&:last-child {
				&:after {
					content: "";
					padding-right: 0;
				}
			}
		}
	}

    %breadcrumbs__current { color: $grayLight; }

/* --------------------------------------------------------------------------------------------------------------------

Pagination

    %pagination--btn                # For links in .pagination
    %pagination--btn__hover         # For the :hover state of %pagination--btn
    %pagination--btn__active        # For the :active  state of %pagination--btn
    %pagination--btn__current       # For the current selected link
    %pagination--btn__disabled      # For the disabled links

Styleguide 30.10

-------------------------------------------------------------------------------------------------------------------- */



	%pagination--btn 			{ @extend %btn--default;  }
	%pagination--btn__hover 	{ @extend %btn--default:hover;}
	%pagination--btn__active 	{ }
	%pagination--btn__current 	{ @extend %btn__current; }
	%pagination--btn__disabled 	{ @extend %btn__disabled; }

/* --------------------------------------------------------------------------------------------------------------------

Pager

    %pager--btn                     # For the links in .pager
    %pager--btn__hover              # For the :hover state of %pager--btn
    %pager--btn__active             # For the :active  state of %pager--btn
    %pager--btn__disabled           # For the disabled links

Styleguide 30.11

-------------------------------------------------------------------------------------------------------------------- */

	%pager--btn 				{ @extend %btn--default; }
	%pager--btn__hover 			{ }
	%pager--btn__active 		{ }
	%pager--btn__disabled 		{ @extend %btn__disabled; }

/* --------------------------------------------------------------------------------------------------------------------

Modals

    %modal__btn                     # For all button links in modals
    %modal__close                   # For the default close button
    %modal__close--alt              # Alternative style for close button in iframes
    %modal__btnbar-size             # Width and height of #fancybox-buttons
    %modal__overlay                 # Color of background overlay
    %modal__skin                    # For the modal window
    %modal__nav                     # For the Next and Prev buttons
    %modal__caption                 # For the caption
    %modal__loading                 # Position and style of the loading icon

Styleguide 30.12

-------------------------------------------------------------------------------------------------------------------- */



	// Buttons
	%modal__btn {
		@extend %btn--scripts;
		@include square($modal-btn-size);
		line-height: $modal-btn-size;
	}

	%modal__close {
		$offset: -$modal-btn-size;
		@include position(absolute, $offset .5em 0 0);
	}

	%modal__close--alt {
		@include position(absolute, 0px 0px 0 0);
		background-color: transparent;
		color: $link-color;
		&:hover {
			color: $link-color-hover;
		}
	}

	%modal__btnbar-size {@include size($modal-btn-size, $modal-btn-size * 5);}

	// Other styles
	%modal__overlay {
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiqAcAAIgAgoGu+rEAAAAASUVORK5CYII=');
	}

	%modal__skin {
		@include box-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
		@include border-radius($base-border-radius);
		background: #fff;

		// Icons
		.fancybox-close:after 		{ @include icon-font(\f00d); }
		.fancybox-prev span:after 	{ @include icon-font(\f053); }
		.fancybox-next span:after 	{ @include icon-font(\f054); }
		.btnPrev:after 				{ @include icon-font(\f04a); }
		.btnNext:after 				{ @include icon-font(\f051); }
		.btnPlay:after 				{ @include icon-font(\f04b); }
		.btnPlayOn:after 			{ @include icon-font(\f04c); }
		.btnToggle:after 			{ @include icon-font(\f065); }
		.btnToggleOn:after 			{ @include icon-font(\f066); }
		.btnClose:after 			{ @include icon-font(\f00d); }
	}

	%modal__nav { margin-top: (0 - ($modal-btn-size / 2)); }

	%modal__caption { @extend %caption; }

	%modal__loading {
		margin-top: -($loader-ico-size / 2);
		margin-left: -($loader-ico-size / 2);
		@include opacity(.8);

		div {
			@extend %loader-ico;
			@include square($loader-ico-size);

		}
	}


/* --------------------------------------------------------------------------------------------------------------------

Sliders

    %slider__btn                    # For all button links in sliders
    %slider__pager                  # For the single  links in the pager
    %slider__caption                # For the caption
    %slider__loading                # Position and style of the loading icon

Styleguide 30.13

-------------------------------------------------------------------------------------------------------------------- */

	// Buttons
	%slider__btn {
		@extend %btn--scripts;
		@include square($slider-btn-size);
		line-height: $slider-btn-size;
		margin-top: -($slider-btn-size / 2);

		&.bx-prev i:after { @include icon-font(\f053); }
		&.bx-next i:after { @include icon-font(\f054); }
	}

	// Pager
	%slider__pager {
		@include position(absolute, 0 0 -30px 0);
		padding-top: 20px;
		.bx-pager-item {
			a {
				@include border-radius(5px);
				@include square(10px);
				@include hide-text;
				background: $grayLight;
				margin: 0 5px;
				&:hover, &.active { background: $gray; }
			}
		}
	}

	// Other styles
	%slider__caption { @extend %caption; }

	%slider__loading {
		@extend %loader-ico;
		@include alpha-color(#000, .60);
		min-height: $loader-ico-size;
	}

/* --------------------------------------------------------------------------------------------------------------------

Tabs

    %tab__nav                       # For the tabs links container
    %tab__btn                       # For the single tabs link
    %tab__btn__hover                # For the :hover state of tabs link
    %tab__btn__current              # For the current selected tab link
    %tab__container                 # For the content continer

Styleguide 30.14

-------------------------------------------------------------------------------------------------------------------- */

	%tab__nav { }

	%tab__btn {
		background: $grayLighter;
		border: solid 1px $grayLight;
		border-bottom: none;
	}

	%tab__btn__hover {
		background: $grayLighter;
		border: solid 1px $grayLight;
		border-bottom: none;
	}

	%tab__btn__current {
		border-color: $gray;
		&:after { background: $grayLighter; }
	}

	%tab__container {
		border: solid 1px $gray;
		background: $grayLighter;
	}


/* --------------------------------------------------------------------------------------------------------------------

Alerts

    %alert                          # For all alert messages

Styleguide 30.15

-------------------------------------------------------------------------------------------------------------------- */

	%alert {
		background-color: $grayLighter;
		border: 1px solid $grayLight;
	}

/* --------------------------------------------------------------------------------------------------------------------

Responsive Nav

    %nav--responsive                # For the open nav state in responsive mode
    %nav__toggle                    # For the toggle open/close button in responsive mode

Styleguide 30.16

-------------------------------------------------------------------------------------------------------------------- */


	%nav--responsive {
		background-color: $grayLighter;

		a { padding: nth($btn-padding, 1) $wrapper-padding; }

		> ul > li > a {
			font-weight: bold;
			background-color: $grayLight;
		}

	}

	%nav__toggle {
		@extend .btn;

		span {
			@include hide-text();
		}

		&:before {
			@include icon-font(\f0c9);
		}
	}


/* --------------------------------------------------------------------------------------------------------------------

Shared

Classes For other classes of generic elements

    %caret                          # Side triangle For Dropdowns and Selects
    %loader-ico                     # generic loader icon For all scripts

Styleguide 30.17

-------------------------------------------------------------------------------------------------------------------- */

    %caret {
        &:after {
            @include icon-font(\f078);
        }
    }

    %loader-ico {
        background:
            url('//cdn.jsdelivr.net/wp-advanced-ajax-page-loader/2.5.12/loaders/SMALL%20-%20Spinning%20Arrows.gif')
            center center no-repeat;
    }

}