@import "elements/vars"
@import "../mixins/mixins"

.btn
	font-family: 'GothamPro', sans-serif
	display: inline-block
	font-weight: 900
	color: #fff
	background-color: $accent-color
	border-radius: 50px
	border: 0
	text-align: center
	text-shadow: 0 2px 8px rgba(0,0,0,.1)
	box-shadow: 0 1px 20px rgba(255, 207, 79, .3) ,inset 0 2px 1px rgba(255,255,255,.35)
	transition: all .2s linear
	cursor: pointer

	&:hover
		box-shadow: 0 1px 30px rgba(255, 207, 79, .5) ,inset 0 2px 1px rgba(255,255,255,.35)
		background-color: lighten($accent-color, 3%)


.btn--big
	font-size: 20px
	padding: 20px 50px


.btn--small
	font-size: 16px
	padding: 11px 30px

.btn--accent
	background-color: $accent2-color
	box-shadow: 0 1px 20px rgba(127, 212, 209, .3) ,inset 0 2px 1px rgba(255,255,255,.35)

	&:hover
		box-shadow: 0 1px 30px rgba(127, 212, 209, .5) ,inset 0 2px 1px rgba(255,255,255,.35)
		background-color: lighten($accent2-color, 3%)


.link-more
	font-size: 16px
	display: inline-block

	&:after
		content: ''
		display: block
		width: 100%
		height: 1px
		background-color: $text-color
		margin-top: 1px