@import '../../variables.less';
@import '../../mixins.less';
/**********************
accordion.less
*************************/
#ecf-creator {
	.ecf-accordion-wrapper {
		.ecf-accordion-sections {
			.ecf-accord-section {
				background: @grey_1;
				border: 1px solid @grey_3;
				border-top-width: 0;
				&.active {
					background: @text_2;
					border: 1px solid @text_2;
					margin-bottom: 1px;
					> h4 {
						color: @white;
						.ecf-icon-angle-down {
							color: @white;
						}
					}
				}
				> h4 {
					.flex();
					color: @text_2;
			    justify-content: space-between;
					margin: 0;
					padding: 12px;
					font-weight: 600;
				}
				.accord-section-content {
					background: @white;
					padding: 12px;
					color: @text_2;
				}
			}
		}
	}

	.ecf-accordion-layout-wrapper {
		&.ecf-sections-reorder-on {
			.ecf-section-reorder {
				margin-left: -12px;
				.opacity(1);
				visibility: visible;
			}
		}
		.ecf-section-reorder {
			.opacity(0);
			visibility: hidden;
			font-size: 24px;
	    margin: 0 10px 0 -42px;
	    cursor: move;
	    color: @black;
		}
		.ecf-accordion-wrapper {
			&.ecf-has-sections {				
				.ecf-accordion-sections {
					position: relative;
					border: 1px solid @grey_2;
				}
				& ~ .ecf-create-button {
					margin-top: 12px;
					display: block;
					.ecf-button-inner {
						font-size: 16px;
					}
				}
			}
			.ecf-accordion-sections {				
				.ecf-accord-section {
					.transition(all, 0.15s, ease-out);
					background: @white;
					border-width: 0 0 1px;
					border-bottom: 1px solid @grey_2;
					margin: 0;
					padding: 12px 30px;
					> .ecf-button {
						display: block;
					}
					&:last-child {
						border-width: 0;
					}
					&.active {
						padding: 30px;
						background: @grey_0;
						> h4 {
							> .ecf-confirmation-dialog-outer {
								position: absolute;
								right: 68px;
								top: 0;
								.more-options {
									right: 11px;
									position: absolute;
									font-size: 25px;
									top: 23px;
								}
							}
						}
						&.delete {
							background: fade(@danger, 70%);
							> h4 {
								color: @white;
								label,
								.ecf-toggler,
								.more-options {
									.opacity(0.4);
									color: inherit;
								}								
							}
							.accord-section-content {
								.opacity(0.4) !important;
								.ecf-button {
									color: @white;
								}
							}
						}
						> h4 {
							.ecf-toggler {
								.ecf-icon-angle-down {
									.rotate(180deg);
								}
							}							
						}
						.accord-section-content {
							margin-top: 15px;
						}
					}
					&.ecf-disabled {
						border-color: @grey_3;
						background: @grey_2;
						.ecf-disabled-icon {
							position: absolute;
							right: 85px;
						}
						> h4 > label,
						> .accord-section-content,
						.ecf-disabled-icon {
							background: @grey_2;
							.opacity(0.4) !important;
						}
						> .accord-section-content {
							position: relative;
							&:before {
								content: '';
								position: absolute;
								left: 0;
								top: 0;
								width: 100%;
								height: 100%;
								z-index: 2;
							}
						}
					}
					> h4 {
						color: @text_2;
						font-size: 18px;
						padding: 18px 30px 0;
						margin: -18px -30px 0 -23px;
						justify-content: flex-start;
						position: relative;
						align-items: center;
						> label {
							.flex();
							align-items: center;
							color: inherit;
							font-weight: 600;
							&:hover {
								.ecf-edit-label {
									.translate(10px, 0);
									.opacity(0.4);
								}
								> small {
									.opacity(0);
									.translate(-15px, 0);
								}
							}
							> small {
								.transition(all, 0.25s, ease-out);
								.flex();
								.opacity(0.5);
								.translate(-25px, 0);
								align-items: flex-end;
								font-size: 87%;
								padding: 0 6px;
								text-transform: lowercase;
								height: 18px;
							}							
						}						
						.ecf-toggler {
							.flex();
							color: @text_1;
							font-size: 25px;
							position: absolute;
							right: 10px;
							width: 60px;
							top: 0;
							height: 64px;
							justify-content: center;
							align-items: center;
							padding-top: 4px;
							.ecf-icon-angle-down {
								.rotate(0);
								color: inherit;
							}
						}
						.ecf-edit-label {
							.opacity(0);
							.transition(all, 0.25s, ease-out);
							.translate(-20px, 0);
							> span {
								.flex();
								width: 30px;
						    height: 30px;
						    justify-content: center;
						    align-items: center;
							}
						}
						input {
							.roundedcorners(5px);
							.box-shadow(-5px 0 0 5px @grey_2);
							color: @text_2;
							font-size: 20px;
							border-width: 0;
							padding: 0;
							background: @grey_2;
							width: max-content;
							min-width: 300px;
							position: relative;
							top: 0px;
							left: -1px;
							line-height: 0.8;
							&:focus {
								outline: none;
							}
						}
					}
					.accord-section-content {
						background: transparent;
						padding: 0;
						> ul {
							.box-shadow(0 0 40px 2px fade(@black, 5));
							& + .ecf-create-button {
									margin-top: 15px;
									display: block;
							}							
						}
						> .ecf-create-button {
							margin-top: 0;
							display: block;
							.ecf-button-inner {
								font-size: 16px;
							}
						}
					}
				}
			}			
		}
	}
}

@media (max-width: 500px) {
	#ecf-creator .ecf-accordion-layout-wrapper {
		.ecf-accordion-wrapper {
			.ecf-accordion-sections {
				.ecf-accord-section {
			    padding: 12px 15px;
					&.active {
						padding: 20px 15px;	
					}
					> h4 {
						font-size: 16px;
						padding: 18px 15px 0;
						margin: -18px -26px 0 -2px;
						.ecf-toggler {
							right: 14px;
							font-size: 22px;
							width: 50px;
						}
						input {
							.roundedcorners(2px);
							.box-shadow(-5px 0 0 5px @grey_2);
							font-size: 16px;
							min-width: 200px;
							min-height: 30px;							
						}
					}
					.accord-section-content {
						> .ecf-create-button {
							.ecf-button-inner {
								font-size: 15px;
								font-weight: 500px;
								> span {
									font-size: 20px;
								}
							}
						}
					}
				}
			}
		}
	}
}