/*------------------------------------*\
    $BUTTONS
\*------------------------------------*/

.btn {
	padding: $_u2 30px;

	font-size: 12px;
	line-height: 1;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: .2em;

	background-color: $dark;
	color: white;

	@include transition(all .15s);
	@include border-radius(3px);

	&:hover {
		background-color: $accent;
		color: white;
	}

	&.a{
		border-bottom: none;
	}
}

.btn--primary {
	background-color: $accent;
	color: white;

	&:hover {
		background-color: $dark !important;
	}
}

.btn--secondary {
	color: white;
}

.btn--tertiary {
	@extend .btn--secondary;
	background-color: $light;
}

/*------------------------------------*\
    $SIZES
\*------------------------------------*/
.btn--small {
	padding: 9px 18px;
	//    &.btn--beta {
	//      padding-top: $_u4;
	//      padding-bottom: $_u4;
	//    }
	//    &.btn--alpha {
	//      padding-top: $_u4 + $_u4/2 ;
	//      padding-bottom: $_u4 + $_u4/2;
	//    }
}

.btn--large {
	font-size: 16px;
	padding: $_u2 2em;
	//    &.btn--beta {
	//      padding-top: $_u2 + $_u2/2;
	//      padding-bottom: $_u2 + $_u2/2;
	//    }
	//    &.btn--alpha {
	//      font-size: 20px;
	//    }
}

.btn--huge {
	padding: $_u - $_u4 2.5em;
	font-size: 20px;
	//    &.btn--beta { @include font-size(20px, true, 2.5); }
	//    &.btn--alpha { @include font-size(20px, true, 3); }
}

.btn-list {
	@extend .cf;
	padding: 0;
	margin: 0 0 0 -2px;
	list-style: none;

	> .btn, > li, > a {
		float: left;
		margin-left: 2px;
		margin-bottom: 2px;
	}
}

.meta-list {
	margin-bottom: $_u2;

	.btn {
		padding: 0 6px;

		@include font-size(12px);
		text-transform: uppercase;
		font-weight: normal;
	}

	.list-head {
		margin-right: $_u2;
		border: 1px solid transparent;
	}

	a.btn {
		@extend .link--light;

		margin-left: 0;

		border: 1px solid $borders;
		border-right: 0;
		@include border-radius(0);

		background: transparent;

		&:hover{
			color: $accent;
		}
	}

	a.btn:last-child {
		border-right: 1px solid $borders;
	}
}

.btn.btn--text {
	@extend %text-link;

	padding: 3px 0;

	background: transparent !important;

	border: 0;
	border-bottom: 2px solid $accent;
	@include border-radius(0);

	font-size: 15px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.1em;

	&:hover{
		color: $dark !important;
		border-color: $dark !important;
	}
}