// Variables to be used in themes

:root{
	--accent: #309eb7;
	--link: #999999;
	--link-hover: #000000;
	--link-active: #000000;
	--link-visited: #000000;
	--nav-link: #000000;
	--nav-link-hover: #000000;
	--nav-dd-bg: #fafafa;
	--top-bar-bg: #f1f1f1;
	--footer-bg: #309eb7;
	--footer-text: #ffffff;
	--footer-link: #ffffff;
}

@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() {
	width: auto;
	border: 0;
	border-radius: 3px;
	line-height: 1;
	font-size: 0.9em;
	background-color: var(--accent);
	padding: 0.8em;
	text-transform: uppercase;
	font-weight: 600;
	color: white;
	&:hover, &:focus {
		background-color: var(--accent);
		text-decoration: none;
	}
}

@mixin readmore {
	position: relative;
	display: inline-block;
	padding: 0.4em 0.6em;
	text-decoration: none;
	align-items: center;
	border: solid 1px #cccccc;
	color: var(--accent);
	&:after {
		content: "\f344";
		font-family: "Dashicons";
		position: relative;
		top: 2px;
		margin-left: 0.4em;
		@include transition(all 100ms ease-in-out);
	}
	&:hover {
		color: var(--accent);
		&:after {
			margin-left: 0.7em;
		}
	}
}