/* 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: 0.8;
	}

	&: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: e( %( '%s %s %s/%s %s', @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;
}

// Caridad-only.
// Give WP Donations.
.give-standard-input() {
	box-sizing: border-box;
	padding: 14px 20px;
	height: auto;
	width: 100%;
	position: relative;
	outline: 0;
	border-radius: 0;
	margin: 0;
	transition: all .3s;
	caret-color: var(--vamtam-accent-color-1);
	background-color: #fff;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	&:extend( .vamtam-font-primary-font );
	color: var( --vamtam-accent-color-1 );
	&::placeholder {
		color: e("color( from var( --vamtam-accent-color-6) srgb r g b / .5 )");
	}
	border-style: solid;
	border-width: 2px;
	border-color: var( --vamtam-accent-color-1 );
	border-radius: 30px;
	min-height: 60px;
	max-height: 60px;
	box-shadow: none;

	&:active, &:focus {
		color: var( --vamtam-accent-color-1 );
		border-color: e("color( from var( --vamtam-accent-color-1) srgb r g b / .3 )");
	}
}