$white: rgba(254,255,250,1);
$grey: rgba(220,231,235,1);
$black: rgba(48,69,92,0.8);

.wp-block-orbitfox-accordion-area {
	.transition {
		transition: all 0.25s ease-in-out;
	}

	.no-select {
		-webkit-tap-highlight-color: rgba(0,0,0,0);
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	ul {
		list-style: none;
		perspective: 900;
		padding: 20px 0;
		margin: 0;
		
		li {
			position: relative;
			padding: 0;
			margin: 0;
			padding-bottom: 18px;
			padding-top: 18px;
			list-style: none;
			border-top: 1px dotted $grey;
	
			&:last-of-type {
				border-bottom: 1px dotted $grey;
			}

			.accordion-heading {
				line-height: 34px;
				font-weight: 300;
				letter-spacing: 1px;
				display: block;
				background-color: $white;
				margin: 0 !important;
				padding: 0;
				cursor: pointer;
				@extend .no-select;
			}

			.accordion-content {
				color: $black;
				font-size: 17px;
				line-height: 26px;
				letter-spacing: 1px;
				position: relative;
				margin-top: 14px !important;
				max-height: 800px;
				@extend .transition;
				opacity: 1;
				transform: translate( 0 , 0 );
			}

			i {
				position: absolute;
				transform: translate( -6px , 0 );
				margin-top: 16px;
				right: 0;
	
				&:before, &:after{
					content: "";
					@extend .transition;
					position: absolute;
					background-color: $black;
					width: 3px;
					height: 9px;
				}

				&:before {
					transform: translate( -2px , 0 ) rotate( 45deg );
				}

				&:after {
					transform: translate( 2px , 0 ) rotate( -45deg );
				}
			}
	
			input[type=checkbox] {
				position: absolute;
				cursor: pointer;
				width: 100%;
				height: 100%;
				z-index: 1;
				opacity: 0;
	
				&:checked {
					&~.accordion-content {
						margin: 0 !important;
						max-height: 0;
						opacity: 0;
						transform: translate( 0 , 50% );
					}
		
					&~i {
						&:before {
							transform: translate( 2px , 0 ) rotate( 45deg );
						}
		
						&:after {
							transform: translate( -2px , 0 ) rotate( -45deg );
						}
					}
				}
			}
		}
	}
}