@import "../../css/_mixins.scss";
@import "../../css/_trx_addons.vars.scss";


/* Expand / Collapse */
.trx_expcol_on {
	position: relative;

	&.trx_expcol_gradient_on {
		--trx-expcol-gradient-offset: 0%;

		&:after {
			content: ' ';
			display: block;
			@include box(100%, 50%);
			@include abs-lb(0, 0, 20);
			background: -webkit-gradient(linear,left bottom,left top,color-stop(var(--trx-expcol-gradient-offset),#fff),to(rgba(255,255,255,0)));
			background: -webkit-linear-gradient(bottom,#fff var(--trx-expcol-gradient-offset),rgba(255,255,255,0) 100%);
			background: linear-gradient(to top,#fff var(--trx-expcol-gradient-offset),rgba(255,255,255,0) 100%);
			@include transition-property(opacity);
			pointer-events: none;
		}
	}

	.trx_expcol_button {
		@include flex;
		@include flex-direction(row);
		@include flex-justify-content(center);
		@include flex-align-items(center);
		@include abs-lb(50%, 0, 21);
		@include translate(-50%, 0%);
		@include transition-properties(transform,background-color,border-color);
		
		&:where(:not(.trx_addons_customizable)) {
			line-height: 1em;
			padding: 0 3px;
			border: 2px solid transparent;
			background-color: rgba(255,255,255,0.6);
		}
	}
	:where(body:not(.trx_addons_customizable_theme)) & {
		.trx_expcol_button_with_bg {
			padding: 0.75em 1.5em;
		}
		.trx_expcol_button_with_bg,
		.trx_expcol_button_with_shadow {
			@include translate(-50%, -50%);
		}
	}
	.trx_expcol_button_icon,
	.trx_expcol_button_title {
		display: inline-block;
		vertical-align: middle;
		@include transition-property(color);
	}
	.trx_expcol_button_icon {
		display: none;
	}
	.trx_expcol_button_icon + .trx_expcol_button_title {
		margin-left: 0.5em;
	}
	
	&.trx_expcol_state_collapsed {
		overflow: hidden !important;

		&:after {
			opacity: 1;
		}
		.trx_expcol_button_icon_collapsed {
			display: inline-block;
		}
	}
	
	&.trx_expcol_state_expanded {
		&:after {
			opacity: 0;
		}
		.trx_expcol_button_icon_expanded {
			display: inline-block;
		}
	}

	&.trx_expcol_state_animated {
		max-height: none !important;

		&.trx_expcol_gradient_on:after {
			opacity: 1;
		}
	}
}