/*
 * TDS Elementor - TDS Accordion.
 * Elementor's own Accordion stylesheet does the accordion (the widget carries its class as well). This file adds
 * the two columns at the end of each header row, and the row of headings above the first item.
 */

.elementor-widget-tdsel-feature-accordion {
	--tdsel-fa-col-width: 90px;
	--tdsel-fa-icon-size: 20px;
	--tdsel-fa-yes: #2e7d32;
	--tdsel-fa-no: #b32d2e;
	--tdsel-fa-part: #c77449;
	--tdsel-fa-custom: currentColor;
	--tdsel-fa-col1-bg: transparent;
	--tdsel-fa-col2-bg: transparent;
	--tdsel-fa-head-colour: inherit;
	--tdsel-fa-head-gap: 8px;
	/* Where the title sits in the row: which margins take up the spare room. Start: the one before the columns. */
	--tdsel-fa-lead: 0px;
	--tdsel-fa-trail: 0px;
	--tdsel-fa-cols-ms: auto;
	/* The expand icon comes first unless Icon Position says End, so it has the leading margin and the title the other. */
	--tdsel-fa-icon-ms: var(--tdsel-fa-lead);
	--tdsel-fa-header-ms: var(--tdsel-fa-trail);
}

/* The row's contents are no longer spread out by the row: the margins below place them, so the columns stay at the end.
   (Positioned, and nothing shows outside it: the bands of colour behind the columns are measured from the row.) */
.tdsel-fa > .e-n-accordion-item > .e-n-accordion-item-title {
	justify-content: flex-start;
	position: relative;
	overflow: hidden;
	overflow: clip;
}

.tdsel-fa > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header {
	min-width: 0;
	margin-inline-start: var(--tdsel-fa-header-ms);
}

.tdsel-fa > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-icon {
	flex: none;
	margin-inline-start: var(--tdsel-fa-icon-ms);
}

/* No expand icon: the title is the first thing in the row whatever Icon Position says. */
.tdsel-fa--no-toggle > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header {
	margin-inline-start: var(--tdsel-fa-lead);
}

/* The two columns. They come last whichever side the expand icon is on. */
.tdsel-fa > .e-n-accordion-item > .e-n-accordion-item-title > .tdsel-fa-cols {
	display: flex;
	flex: none;
	order: 5;
	align-self: stretch;
	margin-inline-start: var(--tdsel-fa-cols-ms);
}

/* A column's own background: a band behind it, the full height of the header row (the row's padding included).
   The first is one column wide. The second starts where the first ends and runs on to the end of the row, where
   the row cuts it off, so no strip of the row's own colour is left beside it. */
.tdsel-fa > .e-n-accordion-item > .e-n-accordion-item-title > .tdsel-fa-cols::before,
.tdsel-fa > .e-n-accordion-item > .e-n-accordion-item-title > .tdsel-fa-cols::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	pointer-events: none;
}

.tdsel-fa > .e-n-accordion-item > .e-n-accordion-item-title > .tdsel-fa-cols::before {
	width: var(--tdsel-fa-col-width);
	background: var(--tdsel-fa-col1-bg);
}

.tdsel-fa > .e-n-accordion-item > .e-n-accordion-item-title > .tdsel-fa-cols::after {
	width: 100vw;
	margin-inline-start: var(--tdsel-fa-col-width);
	background: var(--tdsel-fa-col2-bg);
}

.tdsel-fa-col {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tdsel-fa-col-width);
	line-height: 1;
}

.tdsel-fa-col > i {
	position: relative; /* in front of the column's band of colour */
	z-index: 1;
	font-size: var(--tdsel-fa-icon-size);
	color: inherit;
}

.tdsel-fa-col > svg,
.tdsel-fa-col > img {
	position: relative;
	z-index: 1;
	width: var(--tdsel-fa-icon-size);
	height: var(--tdsel-fa-icon-size);
	fill: currentColor;
}

.tdsel-fa-col.tdsel-fa-is-yes { color: var(--tdsel-fa-yes); }
.tdsel-fa-col.tdsel-fa-is-no { color: var(--tdsel-fa-no); }
.tdsel-fa-col.tdsel-fa-is-part { color: var(--tdsel-fa-part); }
.tdsel-fa-col.tdsel-fa-is-custom { color: var(--tdsel-fa-custom); }

/* The headings: one over each column. The row has the header rows' own side padding and border width, so the
   headings stand exactly over the columns whatever the Accordion's Padding is set to. */
.tdsel-fa-head {
	display: flex;
	justify-content: flex-end;
	padding: var(--n-accordion-padding);
	padding-block: 0 var(--tdsel-fa-head-gap);
	border-inline: var(--n-accordion-border-width) solid transparent;
	color: var(--tdsel-fa-head-colour);
}

.tdsel-fa-head__col {
	flex: none;
	width: var(--tdsel-fa-col-width);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	overflow-wrap: anywhere;
}

/* Phones: narrower columns, unless Column Width has been set for this screen size. */
@media (max-width: 767px) {
	.elementor-widget-tdsel-feature-accordion {
		--tdsel-fa-col-width: 64px;
		--tdsel-fa-icon-size: 18px;
	}

	.tdsel-fa-head__col {
		font-size: 11px;
	}
}