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

@import 'components/fields-nav.less';
@import 'components/field.less';
@import 'components/field-types.less';

/**********************
fields-skelton.less
*************************/
@keyframes ecf-skelton-loading {

	0% {
		background-color: fade(@black, 15%);
	}

	100% {
		background-color: fade(@black, 5%);
	}

}

#ecf-creator {	
	.ecf-skelton-loading {
		overflow: hidden;		
		position: relative;
		&.ecf-rounded {
			.roundedcorners(5px) !important;
		}
		&:before {
			animation: ecf-skelton-loading 1s linear infinite alternate;
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
	}
	.ecf-fields-wrapper {
		position: relative;
		.ecf-fields {
			&.ecf-skelton {				
				height: auto !important;
				li.ecf-simple-field {
					> header {
						label {
							.inline-flex();
							align-items: center;
							.ecf-mobile {
								display: none;
							}
						}
					}
					.ecf-skelton {
						width: 150px;
						height: 10px;
						background: @grey_1;
					}
				}
			}		
			li.ecf-fields-group {
				&.ecf-skelton {
					.ecf-fields-group-inner {
						> header {
							label {
								width: 250px;
								height: 20px;
								margin: 5px 0;
								background: @grey_2;
							}
						}
						.options-dropdown .more-options,
						.toggle-field-group {
							background: @grey_2;
							.roundedcorners(25px);
							width: 25px;
							height: 25px;
							top: -38px;
						}
						.toggle-field-group {
							.roundedcorners(0);
							height: 10px;
							top: 39px;
							right: 54px;
						}
					}
				}
			}
		}
	}
	.ecf-field-filters.ecf-skelton {
		> div {
			.opacity(1) !important;
			visibility: visible !important;
		}
		.ecf-fields-nav {
			&.ecf-skelton {
				.flex();
				li {
					span {
						.inline-flex();
						width: 70px;
						height: 13px;
						background: @grey_2;
					}
				}
			}
		}		
		.ecf-search-wrapper {
			&.ecf-skelton {
				background: @grey_1;
				min-width: 300px;
				height: 52px;
				.roundedcorners(8px);
				visibility: visible;
			}
		}
	}

	.ecf-has-fields {

		.ecf-create-buttons-wrapper {
			&.ecf-skelton {
		    justify-content: flex-start;
			}
		}

	}

	.ecf-create-buttons-wrapper {
		&.ecf-skelton {
			position: relative;
			top: 30px;
			margin-bottom: 12px;
		}
	}

	button.ecf-skelton {
		.roundedcorners(5px);
		background: @primary;
		height: 36px;
		width: 105px;
		border-width: 0;
		&.ecf-text {
			background: @grey_2;
		}
		&.ecf-solid {
			background: @grey_2;
			margin-left: 5px;
			width: 176px;
			height: 40px;
		}
		&.ecf-outline {
			border: 1px solid @grey_1;
			background: @grey_1;
			width: 130px;
			height: 40px;
		}
	}
}

@media (max-width: 500px) {
	#ecf-creator {

		.ecf-field-filters.ecf-skelton {
			.ecf-search-wrapper {
				&.ecf-skelton {
					height: 40px;
				}
			}
			.ecf-fields-nav.ecf-skelton {
				li {
					span {
						height: 8px;
					}
					&:after {
						height: 8px;
					}
				}
			}
		}

		.ecf-fields-wrapper {
			.ecf-fields.ecf-skelton {
				li.ecf-simple-field {
					> header {
						label {
							.ecf-skelton {
								height: 5px;
								position: relative;
						    top: 2px;
						    width: 180px;
							}
							&.field-key {
								display: none;
							}
							&.ecf-field-type {
								width: 40%;
								height: 12px;
								&.ecf-desktop {
									display: none;
								}
								&.ecf-mobile {
									.flex();
								}
							}							
						}
						.ecf-field-options-mobile {
							.more-options {
								color: fade(@black, 15%);
							}
						}
					}
				}
				li.ecf-fields-group.ecf-skelton {
					.ecf-fields-group-inner {
						> header {
							label {
								width: 50%;
								height: 8px;
							}
						}
						.toggle-field-group {
							height: 8px;
					    top: 30px;
					    right: 54px;
						}
						.options-dropdown {
							.more-options {
								width: 20px;
								height: 20px;
								top: -41px;
								right: 12px;
							}
							&.ecf-field-options-mobile {
								.more-options {
									color: fade(@black, 15%);
									background: transparent;
								}
							}
						}
					}
				}
			}
		}

		button.ecf-skelton {
			&.ecf-save-button {
				width: 40px;
			}
		}
	}
}