.tm-accordion {

	.accordion-title-wrapper {
		cursor: pointer;
	}

	.accordion-title {
		@extend %transit2;
		margin-bottom: 0;
	}

	.accordion-content {
		display: none;
	}

	&.style-01 {
		.accordion-section {
			+ .accordion-section {
				margin-top: 1px;
			}
		}

		.accordion-title {
			position: relative;
			font-size: 18px;
			line-height: 1.2;
			padding: 14px 0 14px 26px;
		}

		.accordion-icon {
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);

			&:before {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				content: '+';
			}
		}

		.active {
			.accordion-icon {
				&:before {
					content: '-';
				}
			}
		}

		.accordion-content {
			padding: 5px 0 21px 26px;
		}
	}

	&.style-02 {

		.accordion-section {
			position: relative;
			border-radius: 5px;
			overflow: hidden;
			background: #fff;

			&:before {
				pointer-events: none;
				content: '';
				border: 1px solid #eee;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				border-radius: inherit;
				z-index: 1;
			}

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

		.accordion-title {
			position: relative;
			font-size: 18px;
			line-height: 1.2;
			background: #f7f7f7;
			color: #111;
			padding: 20px 26px;
			margin: -1px -1px 0;
		}

		.accordion-icon {
			position: absolute;
			top: 50%;
			right: 35px;
			transform: translateY(-50%);
			font-weight: 500;

			&:before {
				@extend %FontAwesomeSolid;
				content: '\f107';
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				font-size: 16px;
			}
		}

		.active {
			box-shadow: 0 20px 40px rgba(0, 0, 0, .07);

			.accordion-title {
				color: #fff !important;
				z-index: 2;
			}

			.accordion-icon {
				&:before {
					content: '\f104';
				}
			}
		}

		.accordion-content {
			padding: 27px 25px 39px;
		}
	}
}
