@import '../../variables.less';
@import '../../mixins.less';

/************************************************************************
tabs.less
***************************************************************************/

#ecf-creator {
	.ecf-tabs-wrapper {
		background: @grey_1;
		border: 1px solid @grey_3;
    align-items: flex-start;
    display: table;
    width: 100%;
		.ecf-tabs {
			width: 30%;
			display: table-cell;
			.ecf-tab {
				.transition(background, 0.25s, ease-out);
				border-bottom: 1px solid @grey_3;
				border-right: 1px solid @grey_3;
				background: @grey_1;
				width: 100%;
				height: 40px;
				display: flex;
				align-items: center;
				padding-left: 15px;
				font-weight: 600;
				font-size: 15px;
				flex-wrap: wrap;
				align-content: center;
				&.active {
					background: @white;
					border-right-width: 0; 
				}
				&.last {
					border-bottom-width: 0; 
				}
				small {
					width: 100%;
					.opacity(0.5);
					text-transform: lowercase;
				}							
			}
		}
		.ecf-tab-content {
			background: @white;
			width: 70%;
			display: table-cell;
		}
	}

	.ecf-tabs-layout-wrapper {
		&.ecf-tabs-reorder-on {
			.ecf-tabs-wrapper {
				position: relative;
				.ecf-tabs {
					width: 16%;
					.ecf-tab {
						> span {
							&.ecf-section-reorder {
								.opacity(1);
								visibility: visible;
								margin-left: 0;
							}
						}
					}
					> .ecf-button {
						.ecf-button-inner {
							font-size: 16px;
							padding: 17px 0;
						}
					}
				}
				.ecf-tab-content {
					position: relative;
					width: 84%;
					.opacity(0.5);
					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						z-index: 1;
					}
				}
			}
		}
		.ecf-tabs-wrapper {
			.flex();
			align-items: stretch;
			border-width: 0;
			background: transparent;
	    justify-content: space-between;
			.ecf-tabs {
				width: 15%;
				padding-top: 1px;
				position: relative;				
				display: block;
				.ecf-tab {
					.flex();			
					border: 1px solid @grey_3;			
					height: 70px;
					position: relative;
					margin-top: -1px;
					flex-wrap: nowrap;
					justify-content: flex-start;
					&.ecf-disabled {
						.ecf-tab-inner {
							background: @grey_2;
							> * {
								.opacity(0.4);
							}
						}	
						.ecf-disabled-icon {
							.ecf-icon-eye-off-solid {
								.translate(0, -50%);
								position: absolute;
								right: 8px;
								top: 50%;
								height: 17px;
								font-size: 17px;
							}	
						}										
					}
					&.ecf-active {	
						background: @white;						
						z-index: 1;	
						border-right-width: 0;
						&.ecf-disabled {
							background: @grey_2;
						}
						.ecf-tab-inner {
							color: @text_3;							
						}			
					}
					&.delete {
						background: fade(@danger, 70%);
						border-width: 0;
						&.ecf-disabled {
							background: fade(@danger, 70%);
							.ecf-tab-inner {
								background: transparent;				
							}	
						}
						.ecf-tab-inner,
						.ecf-options-dropdown .more-options {
							color: @white;
							.opacity(0.5);
						}
					}
					.ecf-tab-inner {
						.transition(opacity, 0.25s, ease-out);
						.flex();
						color: @text_1;						
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						align-items: center;
						padding-left: 15px;
						> span {
							.flex();
							flex-wrap: wrap;
							font-weight: 600;
							width: calc(~"100% - 29px");
							overflow: hidden;
							white-space: nowrap;
						}
					}
					.ecf-confirmation-dialog-outer {
						.more-options {
							color: @white;
							position: absolute;
							right: 10px;
							font-size: 22px;
							top: 23px;
						}
					}
					> span {
						.flex();
						flex-wrap: wrap;
						width: 100%;
						&.ecf-section-reorder{
							width: auto;
						}
						&.ecf-section-reorder {
							.opacity(0);
							visibility: hidden;
							margin-left: -34px;
						}
					}
					input {
						.roundedcorners(0);
						font-size: 15px;
						border: 1px dotted fade(@text_1, 50);
						border-width: 0 0 1px;
						padding: 0;
						background: transparent;
						width: 100%;
						position: relative;
						top: 1px;
						left: -1px;
						&:focus {
							outline: none;
							.box-shadow(none);
							border-bottom: 1px dotted fade(@text_1, 50); 
						}
					}
					.ecf-section-reorder {
				    color: @black;
						position: relative;
						font-size: 24px;
				    margin-right: 10px;
				    cursor: move;
				    z-index: 2;
					}
				}
				> .ecf-button {
					display: block;
					height: auto;
					padding: 0;
					.ecf-button-inner {
						font-size: 16px;
						padding: 17px 10px;
					}
				}
			}
			.ecf-tab-content {
				.transition(opacity, 0.25s, ease-out);
				background: @white;
				background: linear-gradient(90deg, @white 0%, @grey_0 30%, @grey_0 100%);
				border: 1px solid @grey_3;
				width: 85%;
				left: -1px;
				position: relative;
				display: block;
				.ecf-inner {
					padding: 30px;
					> .ecf-button {
						margin: 0;
						.ecf-button-inner {
							font-size: 16px;
						}
					}
					> ul {
						& + .ecf-button {
							display: block;
							margin-top: 15px;
						}
					}
				}				

				&.ecf-disabled, &.delete {
					background: @grey_2;
					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						z-index: 2;
					}
					> * {
						.opacity(0.4);
					}
				}
				&.delete {
					background: fade(@danger, 70%);
					border-width: 0;
					left: 0;
					> * {
						.opacity(0.4);
					}
					.ecf-button {
						color: @white;
					}
				}
				ul {
					.box-shadow(0 0 40px 2px fade(@black, 5));
					&.ecf-fields-nav {
						.box-shadow(none);
					}					
				}				
			}
		}
	}
}

@media (max-width: 1350px) {
	#ecf-creator {
		.ecf-tabs-layout-wrapper .ecf-tabs-wrapper {
			.ecf-tabs {
				width: 20%;
			}
			.ecf-tab-content .ecf-inner {
				padding: 30px 15px;
			}
		}
	}
}