.wpv-accordion {
	border: solid 1px @default-line-color;
	margin : 0;
	padding-top: 0px;
	list-style: none;
	background: @accent-color-8;

	.tab {
		position: relative;
		font-size: inherit;
		margin: 0;
		padding: 0;
		color: inherit;
		outline: none;
		border-top: 1px solid @accent-color-7;

		&:first-child {
			border-top: 0px;
		}

		&.ui-state-hover,
		&.ui-state-active,
		&.ui-state-selected {
			@hover-color: @accent-color-7;
			background-color: @accent-color-7;
			border-color: @hover-color;

			.ui-icon:after {
				content: icon(theme-minus);
				color: @accent-color-1 !important;
				font-family: theme;
			}
		}

		&.ui-state-active.has-bg {
			background: @accent-color-1;

			.inner {
				opacity: 1;
			}
		}

		.inner {
			padding: 23px 55px 23px 20px;
			margin : 0;
			cursor : pointer;
			outline: none !important;
			display: block;
			.wpv-font(h4-);
			color: @accent-color-8;
			background-color: @accent-color-2;
			transition: opacity .3s ease;
			font-size: 12px;
			font-weight: bold;

			&:hover {
				text-decoration: none;
			}
		}

		.ui-icon {
			width      : 40px;
			font-style : normal;
			display    : block;
			position   : absolute;
			right      : 10px;
			text-align : center;
			font-size: 12px;
			line-height: 74px;

			&:after {
				content    : icon(theme-plus);
				color      : @accent-color-1;
				font-family: theme;
			}
		}
	}

	.pane .inner {
		padding: 10px 20px;
		z-index: 1;
		position: relative;
		overflow: hidden;
	}

	.pane-wrapper {
		background-position: top center;
		background-size: cover;
		padding: 0;
		border-bottom: 1px solid @accent-color-7;

		&:first-child {
			&, .tab .inner {
				border-radius: 0;
			}
		}

		&:last-child {
			border-bottom: none;

			&, .tab:not(.ui-state-active) .inner {
				border-radius: 0;

			}
		}
	}
}