/* =============================================================================
- Accordion
============================================================================= */
.gwel-accordion {
	display: flex;
	flex-direction: column;
	.gwel-accordion-tab {
		display: flex;
		align-items: center;
		cursor: pointer;
		gap: 12px;
		.gwel-accordion-open-icon,
		.gwel-accordion-close-icon {
			transition: transform .3s ease, opacity .3s ease, color .3s ease, border-color .3s ease, background-color .3s ease;
		}
		.gwel-accordion-close-icon {
			opacity: 0;
			transform: rotate(-90deg);
		}
		&.gwel-active {
			.gwel-accordion-open-icon {
				opacity: 0;
				transform: rotate(90deg) scale(0);
			}
			.gwel-accordion-close-icon {
				opacity: 1;
				transform: rotate(0deg);
			}
		}
		.gwel-accordion-open-icon,
		.gwel-accordion-close-icon {
			line-height: 0;
			position: relative;
			color: var(--gwel-icon--text-c, #b8b8b8);
			text-align: center;
			i {
				font-size: var(--gwel-icon--size, 24px);
				width: 1em;
				height: 1em;
			}
			svg {
				display: block;
				width: var(--gwel-icon--size, 24px);
				height: var(--gwel-icon--size, 24px);
				fill: var(--gwel-icon--text-c, #000000);
				g,
				path {
					fill: var(--gwel-icon--text-c, inherit);
				}
			}
		}
		&.gwel-icon-view-stacked {
			.gwel-accordion-open-icon,
			.gwel-accordion-close-icon {
				padding: var(--gwel-icon--padding, 1.5em);
				color: var(--gwel-icon--text-c, #ffffff);
				background-color: var(--gwel-icon--background-c, #b8b8b8);
				border-radius: var(--gwel-icon--border-radius, 100%);
				svg {
					fill: var(--gwel-icon--text-c, #ffffff);
				}
			}
		}
		&.gwel-icon-view-framed {
			.gwel-accordion-open-icon,
			.gwel-accordion-close-icon {
				padding: var(--gwel-icon--padding, 1.5em);
				color: var(--gwel-icon--text-c, #b8b8b8);
				border: var(--gwel-icon--border-w, 3px) solid var(--gwel-icon--border-c, $color-grey);
				background-color: var(--gwel-icon--background-c, transparent);
				border-radius: var(--gwel-icon--border-radius, 100%);
				svg {
					fill: var(--gwel-icon--text-c, #000000);
				}
			}
		}
	}
	.gwel-accordion-title {
		margin: 0;
		flex: 1;
		span {
			position: relative;
		}
		.gwel-label {
			position: absolute;
			top: 0;
			left: 100%;
			font-size: 12px;
			line-height: 1.000em;
			white-space: nowrap;
			color: #ffffff;
			background-color: var( --e-global-color-primary, #000 );
			padding: 4px 8px;
		}
	}
	.gwel-accordion-icon {
		position: relative;
		.gwel-accordion-close-icon {
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.gwel-accordion-content {
		padding: 12px 0;
		display: none;
	}
}