.google-font(@name, @widths: "400,400i,700,700i") {
	@import (css) url("https://fonts.googleapis.com/css?family=@{name}:@{widths}&subset=latin,latin-ext");
}

.progress(@color) {
	@counter-style circle-empty {
		system: additive;
		additive-symbols: 1 "○", 0 "";
	}

	@counter-style circle-full {
		system: additive;
		additive-symbols: 1 "●", 0 "";
	}

	@media screen {
		&::after {
			font-size: 20px;
			content: counter(slide-before, circle-empty) counter(slide-current, circle-full) counter(slide-after, circle-empty);
			color: @color;
			display: block;
			text-align: center;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
		}
	}
}

.padding-lr(@margin) {
	maslo-slide {
		> * {
			margin-left: @margin;
			margin-right: @margin;
		}
		> ul, > ol {
			margin-left: 0;
			padding-left: @margin;
		}
	}
}

.fancy-link(@bg-color, @hover-color) {
	a {
		color: inherit;
		text-decoration: none;
		background: no-repeat linear-gradient(@bg-color, @bg-color) 0 100% / 100% calc(1em / 12);
		transition: background-size 300ms, color 300ms;

		&:focus, &:hover {
			background-size: 100% 100%;
			color: @hover-color;
		}
	}
}