//============================================================
// SF Accordion
//============================================================
.#{$prefix}accordion {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.#{$prefix}accordion-item {
	overflow: hidden;
	margin-bottom: 0.25rem;

	.#{$prefix}accordion-content {
		display: none;
	}

	&:first-of-type ~ .sf-accordion-item {
		margin-top: $accordion-item-top-offset;
	}

	> .#{$prefix}accordion-content {
		display: none;
		padding: $accordion-content-padding;
		position: relative;
		background-color: lighten($accordion-toggle-border-color,9.4%);
	}
}

.#{$prefix}accordion-toggle {
	display: flex;
	align-items: center;
	position: relative;
	border: 0.0625rem solid transparent;
	border-radius: $accordion-toggle-border-radius;
	background-color: $accordion-toggle-border-color;
	padding: $accordion-toggle-padding;
	cursor: pointer;

	> .#{$prefix}accordion-icon {
		width: $accordion-toggle-icon-dim;
		height: $accordion-toggle-icon-dim;
		margin-left: $accordion-toggle-icon-offset;
		transition: $accordion-toggle-icon-animation;
		position: relative;
		pointer-events: none;
		background-repeat: none;
		background-size: contain;
		opacity: 0.6;
		transform: rotateZ($accordion-toggle-icon-rotation);
		background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMTg1LjM0MyAxODUuMzQzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxODUuMzQzIDE4NS4zNDM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBzdHlsZT0iZmlsbDojMDEwMDAyOyIgZD0iTTUxLjcwNywxODUuMzQzYy0yLjc0MSwwLTUuNDkzLTEuMDQ0LTcuNTkzLTMuMTQ5Yy00LjE5NC00LjE5NC00LjE5NC0xMC45ODEsMC0xNS4xNzUNCgkJCWw3NC4zNTItNzQuMzQ3TDQ0LjExNCwxOC4zMmMtNC4xOTQtNC4xOTQtNC4xOTQtMTAuOTg3LDAtMTUuMTc1YzQuMTk0LTQuMTk0LDEwLjk4Ny00LjE5NCwxNS4xOCwwbDgxLjkzNCw4MS45MzQNCgkJCWM0LjE5NCw0LjE5NCw0LjE5NCwxMC45ODcsMCwxNS4xNzVsLTgxLjkzNCw4MS45MzlDNTcuMjAxLDE4NC4yOTMsNTQuNDU0LDE4NS4zNDMsNTEuNzA3LDE4NS4zNDN6Ii8+DQoJPC9nPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=');
	}

	> .#{$prefix}accordion-text {
		width: calc(100% - #{$accordion-toggle-icon-dim + $accordion-toggle-icon-offset});
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 0;
		font-size: $accordion-toggle-font-size;
		font-weight: $accordion-toggle-font-weight;
		font-family: $theme-font-family;
		color: inherit;
		user-select: none;
		pointer-events: none;

		> small {
			color: $theme-text-muted;
			font-weight: 400;
			font-size: 75%;
		}
	}

	&.in {
		> .#{$prefix}accordion-icon {
			transform: rotateZ($accordion-toggle-icon-rotation-in);
			transition: $accordion-toggle-icon-animation;
		}

		+ .#{$prefix}accordion-content {
			display: block;
			font-size: $accordion-toggle-font-size;
			font-weight: 300;
		}

		> .#{$prefix}accordion-text {
			color: $accordion-toggle-active-color;
		}
	}

	&:hover {
		background-color: $accordion-toggle-border-color;
		border-color: $accordion-toggle-border-color;
		z-index: 1;
	}
}