// Variables to be used in themes

$accent: #26c088;
$link: $accent;
$link-hover: darken($link, 5%);

@mixin transition ($property...) {
	@for $i from 0 to length($property) {
		transition: $property;
		-webkit-transition: $property;
		-moz-transition: $property;
		-ms-transition: $property;
		-o-transition: $property;
	}
}

@mixin transform( $property ) {
	transform: $property;
	-webkit-transform: $property;
	-moz-transform: $property;
	-ms-transform: $property;
	-o-transform: $property;
}

@mixin line-clamp( $lines ) {
	display: -webkit-box;
	-webkit-line-clamp: $lines;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@mixin button() {
	border: 0;
	border-radius: 3px;
	line-height: 1;
	font-size: 0.9em;
	background-color: $accent;
	padding: 0.8em;
	text-transform: uppercase;
	font-weight: 600;
	color: white;
	&:hover, &:focus {
		background-color: darken($accent, 5%);
		text-decoration: none;
	}
}

@mixin readmore {
	position: relative;
	text-decoration: none;
	font-weight: 600;
	&:before {
		content: "";
		position: absolute;
		bottom: 0;
		height: 2px;
		width: 100%;
		background-color: $accent;
		opacity: 0;
		@include transform(translateY(3px));
		@include transition(all 100ms ease-out);
	}
	&:hover {
		&:before {
			@include transform(translateY(0));
			opacity: 1;
		}
	}
}