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

.trx-addons-accordion {
	width: auto;
	height: auto;
	transition: all 0.3s ease-in-out;

	h1,h2,h3,h4,h5,h6 {
		// font-family: inherit;
		letter-spacing: 0;
		margin: 0;
	}

	.trx-addons-accordion-tab-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: inherit;
		font-size: 1rem;
		font-weight: 600;
		line-height: 1;
		padding: 15px;
		outline: 0;
		cursor: pointer;
		transition: all 0.3s ease-in-out;
	}
	.trx-addons-accordion-tab-icon {
		@include transition-colors;
	}

	&.trx-addons-toggle-icon-align-left .trx-addons-accordion-tab-title {
		flex-direction: row-reverse;
		justify-content: flex-end;
	}
}

.trx-addons-accordion-toggle-icon {
	display: inline-flex;
	transition: none;
	position: relative;	// To enable a vertical offset for the icon
	z-index: 10;

	.trx-addons-icon {
		@include square(1em);
	}
}

.trx-addons-accordion-toggle-icon-open,
.trx-addons-accordion-tab-show .trx-addons-accordion-toggle-icon-close,
.trx-addons-accordion-tab-active-default .trx-addons-accordion-toggle-icon-close {
	display: none;
}

.trx-addons-accordion-tab-show .trx-addons-accordion-toggle-icon-open,
.trx-addons-accordion-tab-active-default .trx-addons-accordion-toggle-icon-open {
	display: inline-block;
}

.trx-addons-accordion-tab-content {
	display: none;
	padding: 15px;
	box-sizing: border-box;
	font-size: 1rem;
	line-height: 1.7;

	p:last-child {
		margin: 0;
	}

	&.trx-addons-accordion-tab-active {
		display: block;
	}
}

.trx-addons-accordion-item {
	overflow: hidden;
	transition: all 0.3s ease-in-out;
}

.trx-addons-accordion-title-icon {
	display: flex;
	align-items: center;
}

.trx-addons-accordion-tab-icon {
	display: inline-block;
	margin-right: 10px;
	position: relative;	// To enable a vertical offset for the icon
}