/*

Buttons

	Can be used with anchor or button tags. Tag Buttons require a data-label
	attribute, and inherit colors from _Tags.scss.

	Usage
	.Button                 - Default
	.Button--primary        - Primary
	.Button--danger         - Danger!
	.Button--disabled       - Disabled

	Colors
	.Button--dark           - Dark color
	.Button--light          -Light color

	Shapes
	.Button                 - Default shape
	.Button--text           - Underlined text

	Sizes
	.Button                 - Default size
	.Button--hero           - Hero size
	.Button--compact        - Compact size

	Markup
	<a href="#" class="Button {{modifier_class}}" data-label="label">Text</a>

	Styleguide Base.Buttons

*/

.Button {
	font-family: $body;
	color: $c-b300;
	background: transparent;
	border: solid 1px $c-b300;
	border-radius: 3px;
	display: inline-block;
	@include fontsize($t-1, $t-h-1);
	padding: 0.75rem 2rem 0.625rem;
	margin: 0;
	text-align: center;
	text-decoration: none;
	font-weight: $t-bold;
	text-shadow: none;
	vertical-align: baseline;
	outline: none;

	transition: all 0.2s ease-in-out;

	// Allow buttons to work on elements that aren't <a>
	cursor: pointer;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	&:hover,
	&:active,
	&.is-open {
		color: darken($c-b300, 20%);
		text-decoration: none;
		border-color: darken($c-b300, 10%);
		box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.1 );
	}

	svg {
		vertical-align: middle;

		&:first-child { margin-right: .3em; }
		&:last-child { margin-left: .3em; }

		path { fill: currentColor };
	}
}

// Colors
.Button--primary {
	background: $c-b300;
	color: $c-w100;
	border: solid 1px $c-b300;

	&:hover, &:active, &.is-open {
		color: $c-w100;
		background: darken($c-b300, 10%);
		border-color: $c-b300;
	}
}

.Button--light{
	border-color: $c-w100;
	color: $c-w100;

	&:hover, &:active, &.is-open {
		color: $c-b700;
		background: $c-w100;
		border-color: $c-w100;
	}
}

.Button--dark{
	border-color: $c-b700;
	color: $c-b700;

	&:hover, &:active, &.is-open {
		color: $c-w100;
		background: $c-b700;
		border-color: $c-b700;
	}
}

// Tags overlapping button
.Button__tag {
	position: relative;
	padding-left: 3rem;
	margin-left: 3em;
	border-color: $c-b700;
	color: $c-b700;

	&:hover {
		 border-color: $c-b300;
		 color: $c-b300;
	}

	&:before {
		content: attr(data-label);
		position: absolute;
		text-transform: uppercase;
		@include fontsize($t-0);
		@extend .Tag--blue;
		right: calc(100% - 2rem);
		top: 7px;
		padding: 0.25rem 0.75rem;
		border-radius: 50px;
	}

	&.Button__tag--negative {
		&:hover, &.is-open { border-color: $c-r300; color: $c-r500;}
		&:before { @extend .Tag--red; }
	}

	&.Button--compact {
		padding-left: 2.75em;

		&:before {
			top: 0.1875rem;
		}
	}

	&.Button--block { margin-left:0; }
}

// Danger!
.Button--danger {
	background: transparent;
	border-color: $c-r300;
	color: $c-r300;

	&:hover, &:active, &.is-open {
		background: $c-r300;
		border-color: $c-r300;
		color: $c-r500; }

	&.Button--text { color: $c-r300; background: transparent; }
	&.Button--text:hover { color: darken($c-r300, 10%); background: transparent; }
}

// Compact
.Button--compact {
	@include fontsize($t-1, $t-h-1);
	padding: 0.5rem 1rem 0.375rem;
}

// Hero
.Button--hero {
	padding: 0.9375rem 2rem;
}

// Disabled
.Button:disabled, .Button--disabled {
	// Disable Button
	cursor: not-allowed;
	text-shadow: none;
	border-color: $c-g200;
	background: $c-g200;
	color: $c-g400;

	&:hover, &:active, &.is-open {
		background: $c-g200;
		color: $c-g400;
		transform: scale(1);
		box-shadow: none;
		border-color: $c-g200;
	}

	&:active{ pointer-events: none; }
	&.Button--text { color: $c-g400; background: transparent; }
}

// Text
.Button--text {
	background: transparent;
	border: none;
	position: relative;
	color: $c-b300;
	@include fontsize($t-1, $t-h-1);
	text-decoration: none;
	padding: 0;

	&:hover, &:active, &.is-open {
		border: none;
		background: transparent;
		box-shadow: none;
		color: darken($c-b300, 10%);
		transform: scale(1);
	}

	&:active { color:rgba($c-b700, 0.6); }
}

.Button--text:before {
	content: "";
	position: absolute;
	z-index: $z-0;
	left: 0;
	right: 100%;
	bottom: 0;
	background: currentColor;
	height: 1px;

	transition: right 0.2s ease-out;
}

.Button--text:hover:before {
	right:0%;
}

// Widths
.Button--block {
	display: block;
	width: 100%;
	margin: 0;
}

// Spacing
.Button + .Button {
	margin-left: 1em;
	&.Button--block {margin-left: 0;}
}