@import '../../variables.less';
@import '../../mixins.less';
/**********************
button.less
*************************/
#ecf-creator, .ecf-output-fields-wrapper {

	.mce-btn.mce-active {

		&:hover {
			button {
				color: @text_3;
			}
		}

		button {
			color: @text_3;
			i {
				color: inherit;
			}
		}
	}

	.ecf-button {
		.roundedcorners(5px);
		background-color: @primary;		
		border: 1px solid @primary;
		color: @white;
		padding: 0;
		font-size: 16px;
		cursor: pointer;
		height: 40px;		
		position: relative;
		overflow: hidden;
		outline: none !important;
		text-align: center;
		text-shadow: none;

		&.ecf-disabled {
			.opacity(0.5);
			cursor: default;
		}
		&.small {
			height: 30px;
			.ecf-button-inner {
				line-height: 26px;
		    font-size: 14px;
		    padding: 0 10px;
		    min-height: 28px;
		    .dashicons {
		    	line-height: 26px;
		    }
		    ion-icon {
		    	font-size: 18px;
		    }
			}
			&.with-icon {
				.ecf-button-inner {
					padding-left: 4px;
				}
			}
			&.text {
				.ecf-button-inner {
					font-size: 14px;
				}				
			}
		}
		&.with-icon {
			&.ecf-icon-right {
				.ecf-button-inner {
					padding-right: 12px;
				}	
			}
			&:not(.ecf-icon-right) {
				.ecf-button-inner {
					padding-left: 12px;
				}				
			}
		}
		&.text {
			color: @primary;
			border-width: 0;
			padding: 0;
			height: auto;
			background-color: transparent;
			.ecf-button-inner {
				padding: 0;
				font-weight: 600;				
				font-size: 18px;
				.dashicons {
					font-size: 17px;
				}				
			}
		}
		&.outline {
			background-color: transparent;
			color: @primary;
		}
		&.ecf-bold {
			.ecf-button-inner {
				font-weight: 600;
			}
		}
		.ecf-button-inner {
			color: inherit;	
			padding: 0 20px;
			line-height: 36px;	
			font-weight: 500;
			display: block;
			font-size: 16px;
			min-height: 38px;
			.dashicons {
				font-size: inherit;
				font-weight: normal;
				line-height: inherit;
				height: inherit;
				padding-top: 2px;
			}
			.material-icon {
				font-size: 22px;
			}
			ion-icon {
				.scale(0.95, 0.95);
				font-size: 22px;
		    position: relative;
		    top: 5px;
			}
		}
		&.success {			
			border-color: @success;
			background-color: @success;
			&.outline {
				background-color: transparent;
				color: @success;
			}
		}
		&.accent {			
			border-color: @accent;
			background-color: @accent;
			&.outline {
				background-color: transparent;
				color: @accent;
			}
			&.text {
				color: @accent;
				background-color: transparent;
			}
		}
		&.accent2 {			
			color: @black;
			border-color: @accent2;
			background-color: @accent2;
			&.outline {
				background-color: transparent;
				color: @accent2;
			}
			&.text {
				color: @accent2;
				background-color: transparent;
			}
		}
		&.secondary {			
			border-color: @secondary;
			background-color: @secondary;
			&.outline {
				background-color: transparent;
				color: @secondary;
			}
			&.text {
				color: @secondary;
				background-color: transparent;
			}
		}
		&.danger {			
			border-color: @danger;
			background-color: @danger;
			&.outline {
				background-color: transparent;
				color: @danger;
			}
			&.text {
				color: @danger;
				background-color: transparent;
			}
		}
		&.grey {			
			border-color: @text_1;
			background-color: @text_1;
			&.outline {
				background-color: transparent;
				color: @text_3;
			}
			&.text {
				color: @text_3;
				background-color: transparent;
			}
		}
		&.white {		
			border-color: @white;
			background-color: @white;
			&:not(.outline) {
				color: @primary;
			}
			&.outline {
				border-color: @primary;
				background-color: @white;
			}
			&.text {
				color: @primary;
				background-color: transparent;
			}
		}
		&.black {		
			border-color: @black;
			background-color: @black;
			&:not(.outline) {
				color: @primary_dm;
			}
			&.outline {
				border-color: @primary_dm;
				background-color: @black;
			}
			&.text {
				color: @primary_dm;
				background-color: transparent;
			}
		}
	}
}

@media (max-width: 500px) {
	#ecf-creator, .ecf-output-fields-wrapper {
		.ecf-button {
			height: 36px;
			.ecf-button-inner {
				padding: 0 16px;
				font-size: 15px;
				line-height: 32px;
				&.with-icon {
					padding-left: 6px;
				}
			}
			&.text {
				.ecf-button-inner {
					font-size: 16px;
				}
			}
		}
	}
}