// mixins

@mixin box(){
	@include border-radius(); @include box-shadow(0 1px 2px 1px rgba(0,0,0,0.08)); padding: 0;
	background: $background-color-white; border: none; margin-bottom: 5px;
	h2, h3, h4, h5, h6 { margin-bottom: 12px; margin-top: 0; }
}

@mixin stripes($stripe-opacity){
	@include background-size(100% 400%);
	@include background-image(linear-gradient(-45deg, rgba(255, 255, 255, $stripe-opacity) 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, $stripe-opacity) 50%, rgba(255, 255, 255, $stripe-opacity) 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0)));
}

@mixin button-common-init {
	@include background-image(linear-gradient($button-silver-light-color, $button-silver-medium-color) !important);
	@include box-shadow($button-silver-medium-color 0 0 $button-shadow-width inset !important);
	background-color: $button-silver-light-color !important;
	border: 1px solid $button-silver-medium-color !important;
	border-bottom: 1px solid $button-silver-dark-color !important;
	&:hover { background: $button-silver-light-color !important; }
}

@mixin button-common() {
	@include border-radius();
	@include button-common-init();
	color: $button-silver-font-color !important;
	font-weight: bolder !important;
	font-size: 12px !important;
	line-height: 15px !important;
	overflow: visible;
	padding: 5px 10px 5px !important;
	text-decoration: none !important;
	width: auto;
	&.small {
		padding: 3px 8px 4px !important;
	}
	&:hover, &:active, &.select, &:visited {
		background: $button-silver-light-color;
		color: $button-silver-font-color;
		text-decoration: none;
	}
	&.animate {
		@include stripes(.2);
	}
}

@mixin button-blue {
	&, &:visited {
		@include background-image(linear-gradient($button-blue-light-color, $button-blue-medium-color) !important); }
	@include box-shadow($button-blue-light-color 0 0 $button-shadow-width inset !important);
	background-color: $button-blue-medium-color !important;
	background-image: none !important;
	border: 1px solid $button-blue-light-color !important;
	border-bottom: 1px solid $button-blue-dark-color !important;
	color: $button-blue-font-color !important;
	&:hover, &:focus {
		background: $button-blue-light-color !important;
		color: $button-blue-font-color !important;
	}
	&:active {
		background: $button-blue-medium-color !important;
	}
	&.animate {
		@include stripes(.1);
	}
}

@mixin button-green {
	&, &:visited {
		@include background-image(linear-gradient($button-green-light-color, $button-green-medium-color) !important); }
	@include box-shadow($button-green-light-color 0 0 $button-shadow-width inset !important);
	background-color: $button-green-medium-color !important;
	border: 1px solid $button-green-light-color !important;
	border-bottom: 1px solid $button-green-dark-color !important;
	color: $button-green-font-color !important;
	&:hover {
		background: $button-green-light-color  !important;
		color: $button-green-font-color  !important;
	}
	&:active {
		background: $button-green-medium-color  !important;
	}
	&.animate {
		@include stripes(.1);
	}
}

@mixin button-orange {
	@include background-image(linear-gradient($button-orange-light-color, $button-orange-medium-color));
	@include box-shadow($button-orange-light-color 0 0 $button-shadow-width inset);
	background-color: $button-orange-medium-color !important;
	border: 1px solid $button-orange-light-color !important;
	border-bottom: 1px solid $button-orange-dark-color !important;
	color: $button-orange-font-color !important;
	&:hover {
		background: $button-orange-light-color;
		color: $button-orange-font-color;
	}
	&:active {
		background: $button-orange-medium-color;
	}
	&.animate {
		@include stripes(.2);
	}
}

@mixin button-red {
	@include background-image(linear-gradient($button-red-light-color, $button-red-medium-color) !important);
	@include box-shadow($button-red-light-color 0 0 $button-shadow-width inset !important);
	background-color: $button-red-medium-color !important;
	border: 1px solid $button-red-light-color !important;
	border-bottom: 1px solid $button-red-dark-color !important;
	color: $button-red-font-color !important;
	&:hover {
		background: $button-red-light-color !important;
		color: $button-red-font-color !important;
	}
	&:active {
		background: $button-red-medium-color !important;
	}
	&.animate {
		@include stripes(.2);
	}
}

@mixin button-black {
	@include background-image(linear-gradient($button-black-light-color, $button-black-medium-color));
	@include box-shadow($button-black-light-color 0 0 $button-shadow-width inset);
	background-color: $button-black-medium-color !important;
	border: 1px solid $button-black-light-color;
	border-bottom: 1px solid $button-black-dark-color;
	color: $button-inactive-font-color !important;
	cursor: default;
	&:hover {
		@include background-image(linear-gradient($button-black-light-color, $button-black-medium-color));
		border-color: $button-black-medium-color;
		color: $button-black-font-color;

	}
	&:active, &.select {
		@include background-image(linear-gradient($button-black-light-color, $button-black-medium-color));
		border-color: $button-black-medium-color;
		color: $button-black-font-color;
	}
	&.animate {
		@include stripes(.1);
	}
}

@mixin button-inactive {
	@include background-image(linear-gradient($button-inactive-light-color, $button-inactive-medium-color));
	@include box-shadow($button-inactive-light-color 0 0 $button-shadow-width inset);
	background-color: $button-inactive-medium-color !important;
	border: 1px solid $button-inactive-light-color;
	border-bottom: 1px solid $button-inactive-dark-color;
	color: $button-inactive-font-color;
	cursor: default;
	&:hover {
		@include background-image(linear-gradient($button-inactive-light-color, $button-inactive-medium-color));
		border-color: $button-inactive-medium-color;
		color: $button-inactive-font-color;

	}
	&:active, &.select {
		@include background-image(linear-gradient($button-inactive-light-color, $button-inactive-medium-color));
		border-color: $button-inactive-medium-color;
		color: $button-inactive-font-color;
	}
	&.animate {
		@include stripes(.1);
	}
}