/* Clearfix */

.clearfix() {
	&:before,
	&:after {
		content: " "; /* 1 */
		display: block; /* 2 */
	}

	&:after {
		clear: both;
	}
}

/* Absolute Fill Container */

.vamtam-absolute-fill() {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* buttons */

// common styles for dynamically generated buttons (to be used with .button-gen())
.button-gen-common() {
	display: inline-block;
	text-align: center;
	cursor: pointer;
	position: relative;
	z-index: 0;
	vertical-align: middle;
	user-select: none;
	text-decoration: none;
	text-shadow: none;
	-webkit-font-smoothing: auto;
	transition: all .3s !important; // !important necessary for RevSlider compatibility (>=5.1)

	font: bold 16px/1em var(--vamtam-primary-font-font-family);

	&:focus {
		outline: none;
		opacity: 1;
	}

	&:hover {
		text-decoration: none;
	}
}

.button-gen-solid-common() {
	border-radius: 0;
	border: none;
	padding: var( --vamtam-button-solid-padding, 22px 27px );
}

.button-gen-solid() {
	.button-gen-common();
	.button-gen-solid-common();
}

// mixins for generating button styles based on their background color
//
// this MUST include only colors

.button-gen( @bgcolor ) {
	background: var( e( @bgcolor ) );
	color: var( e( "@{bgcolor}-hc" ) );
}

/////////////////

.button-gen-hover( @bgcolor ) {
	&:hover {
		background: var( e( @bgcolor ) );
		color: var( e( "@{bgcolor}-hc" ) );
	}
}

.button-gen-elementor() {
	background: var( --vamtam-btn-bg-color );
	color: var( --vamtam-btn-text-color );
	&:hover {
		background: var( --vamtam-btn-hover-bg-color );
		color: var( --vamtam-btn-hover-text-color );
	}
}

.standard-button() {
	.button-gen-common();
	.button-gen-solid-common();

	// Backup.
	.button-gen( '--vamtam-accent-color-6' );
	.button-gen-hover( '--vamtam-accent-color-1' );
	// From Elementor opts.
	.button-gen-elementor();

	text-transform: none;

	&.disabled {
		opacity: .3;
		pointer-events: none !important;
	}
}

/* Fonts */

/* !! Attention !!
	When you use this rule, remember to add the relevant equivalent styles
	to layout-below-max.less (tablet) and layout-small.less (phone).
*/
.vamtam-font( @prefix: primary-font- ) {
	@font-family: e( "var( --e-global-typography-vamtam_@{prefix}font-family )" );
	@font-weight: e( "var( --e-global-typography-vamtam_@{prefix}font-weight, normal )" );
	@font-style: e( "var( --e-global-typography-vamtam_@{prefix}font-style, normal )" );
	@font-size: e( "var( --e-global-typography-vamtam_@{prefix}font-size )" );
	@line-height: e( "var( --e-global-typography-vamtam_@{prefix}line-height )" );

	font: @font-weight @font-style @font-size/@line-height @font-family;
	letter-spacing: e( "var( --e-global-typography-vamtam_@{prefix}letter-spacing, normal )" );
	text-transform: e( "var( --e-global-typography-vamtam_@{prefix}transform, none )" );
	text-decoration: e( "var( --e-global-typography-vamtam_@{prefix}decoration, none )" );
}

// Base font rules to extend.
// !! Use :extend() when you want to apply a certain font, NOT a mixin !!
.vamtam-font-primary-font {.vamtam-font(primary_font-);}

.vamtam-font-h1 {.vamtam-font(h1-);}

.vamtam-font-h2 {.vamtam-font(h2-);}

.vamtam-font-h3 {.vamtam-font(h3-);}

.vamtam-font-h4 {.vamtam-font(h4-);}

.vamtam-font-h5 {.vamtam-font(h5-);}

.vamtam-font-h6 {.vamtam-font(h6-);}

.vamtam-checkbox() {
	/* Base for label styling */
	[type="checkbox"] {
		position: absolute;
		left: -9999px;
	}
	[type="checkbox"] + span,
	[type="checkbox"] + label {
		position: relative;
		padding-left: 2.5em;
		cursor: pointer;
		display: flex;
		align-items: center;
	}

	/* checkbox aspect */
	[type="checkbox"] + span:before,
	[type="checkbox"] + label:before {
		content: '';
		position: absolute;
		left: 0;
		width: 24px;
		height: 24px;
		background: #e4e6eb;
		box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
	}
	/* checked mark aspect */
	[type="checkbox"] + span:after,
	[type="checkbox"] + label:after {
		content: '\2713';
		position: absolute;
		left: .2em;
		font-size: 1.3em;
		line-height: 0.8;
		color: #09ad7e;
		transition: all .2s;
	}
	/* checked mark aspect changes */
	[type="checkbox"]:not(:checked) + span:after,
	[type="checkbox"]:not(:checked) + label:after {
		opacity: 0;
		transform: scale(0);
	}
	[type="checkbox"]:checked + span:after,
	[type="checkbox"]:checked + label:after {
		opacity: 1;
		transform: scale(1);
	}
	/* disabled checkbox */
	[type="checkbox"]:disabled + span:before,
	[type="checkbox"]:disabled + label:before {
		box-shadow: none;
		border-color: #bbb;
		background-color: #ddd;
	}
	[type="checkbox"]:disabled:checked + span:after,
	[type="checkbox"]:disabled:checked + label:after {
		color: #999;
	}
	[type="checkbox"]:disabled + span,
	[type="checkbox"]:disabled + label {
		color: #aaa;
	}
}

.vamtam-line-clamp-2() {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    overflow: hidden;
}