.accordion {
	.accordionItem_title {
		background: $color_fill_light;
		width: 100%;
		padding: 12px 20px 12px 20px;
		line-height: 1.6;
		position: relative;
		cursor: pointer;
		@include border_radius();
		@include animate();

		.icon {
			color: inherit;
			margin-right: 5px;
			display: inline-block;
			font-size: 20px;
			line-height: 0;
			vertical-align: -2px;
		}

		h4 {
			color: inherit;
			margin: 0 0 -4px;
			font-size: 1em;
			line-height: 1;
			display: inline-block;
		}

		.accordionItem_control {
			position: absolute;
			top: 50%;
			right: 20px;
			transform: translateY(-50%);

			.ion {
				font-size: 21px;
			}
		}
	}

	.accordionItem_content {
		height: 6px;
		min-height: 6px;
		overflow: hidden;
		transition: height .4s cubic-bezier(.35, .2, .2, 1);

		&.open {
			height: auto;
		}

		.wrap {
			padding: 10px 20px;
		}
	}

	&.outline {

		.accordionItem_title {
			background: transparent;
			border: 1px solid $color_border_dark;
			border-bottom-width: 0;
			border-left: none;
			border-right: none;
			padding-left: 0;
			padding-right: 0;
			border-radius: 0px;
		}

		.icon {
			color: inherit;
			margin-right: 5px;
			display: inline-block;
			font-size: 20px;
			line-height: 0;
			vertical-align: -2px;
		}

		.accordionItem_control {
			right: 0;
		}

		.accordionItem_content {
			height: 0;
			min-height: 0;

			&.open {
				height: auto;
			}

			.wrap {
				padding: 10px 0;
			}
		}

		.accordionItem.active,
		.accordionItem:last-child {
			.accordionItem_title {
				border-bottom-width: 1px;
			}
		}
	}
}