@import "settings/elementor-breakpoints";
@import "settings/mixins";

.civi-accordion {
	.accordion-section {
		&.active {
			> .accordion-header {
				.closed-icon {
					display: block;
				}

				.opened-icon {
					display: none;
				}
			}
		}
	}

	.accordion-header {
		@extend %NormalTransition;
		display: flex;
		align-items: center;
		min-height: 60px;
		cursor: pointer;
	}

	.accordion-title-wrapper {
		font-size: 0;
		flex-grow: 1;
	}

	.accordion-title {
		@extend %NormalTransition;
		display: inline-block;
		margin-bottom: 0;
		color: inherit;
		font-size: 18px;
	}

	.accordion-icons {
		font-size: 16px;
		flex-shrink: 0;
		margin: 0 0 0 10px;
		line-height: 0;

		.closed-icon {
			display: none;
		}
	}

	.accordion-icon {
		@extend %NormalTransition;
	}

	.accordion-content {
		display: none;
		color: #7e7e7e;
	}

	&.civi-accordion-icon-left {
		.accordion-header {
			flex-direction: row-reverse;
		}

		.accordion-icons {
			margin-left: 0;
			margin: 0 10px 0 0;
		}
	}
}

.civi-accordion-style-01 {
	.civi-accordion {
		.accordion-section {
			border-radius: 5px;
			overflow: hidden;
			background: #fff;
			box-shadow: 0 15px 50px rgba(51, 51, 51, 0.1);

			+ .accordion-section {
				margin: 30px 0 0;
			}
		}

		.accordion-header {
			padding: 10px 20px;
		}

		.accordion-content {
			line-height: 1.6;
			padding: 25px 30px;
		}
	}
}

.civi-accordion-style-02 {
	.civi-accordion {
		.accordion-section {
			border: 1px solid #eee;
			border-radius: 24px;
			overflow: hidden;

			+ .accordion-section {
				margin: 24px 0 0;
			}
		}

		.accordion-header {
			padding: 24px;
		}

		.accordion-content {
			padding: 0 24px 24px 24px;
			margin-top: -10px;
		}
	}
}

.civi-accordion-style-03 {
	.civi-accordion {
		.accordion-section {
			border-bottom: 2px solid #eee;
			padding: 9px 0;
		}

		.accordion-header {
			min-height: 64px;
		}

		.accordion-title {
			font-size: 24px;
			font-weight: 600;
		}

		.accordion-icons {
			color: #ababab;
			font-size: 24px;
		}

		.accordion-content {
			padding: 0 0 25px;
		}
	}
}

@include elementor-breakpoint-down(md) {
	.civi-accordion-style-03 {
		.civi-accordion {
			.accordion-title {
				font-size: 21px;
			}
		}
	}
}

@include elementor-breakpoint-down(sm) {
	.civi-accordion-style-03 {
		.civi-accordion {
			.accordion-title {
				font-size: 18px;
			}
		}
	}
}
