//
// Buttons
//

.qazana-button {
	outline: none;
	border: none;
	cursor: pointer;
	border-radius: 3px;
	transition: .5s;

	&:not(.qazana-button-state) {

		.qazana-state-icon {
			display: none;
		}
	}

	.qazana-state-icon {
		@include padding-end(10px);
	}

	&.qazana-button-success {
		color: #fff;

		&[disabled] {
			background-color: $editor-lighter;
		}

		&:not([disabled]) {
			background-color: $editor-success;

			&:hover {
				opacity: 0.85;
				box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
			}

			&:active {
				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.1);
			}
		}
	}

	&.qazana-edit-template {
		display: inline-block;
		margin-top: 15px;
		color: #fff;
	}

	&.qazana-button-default {
		background-color: $editor-light;
		color: #fff;
		font-size: 11px;
		text-transform: uppercase;
		padding: 6.5px 15px;

		&:hover {
			background-color: $editor-dark;
			box-shadow: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
		}

		&:active {
			box-shadow: 0 5px 10px rgba(0, 0, 0, 0.19), 0 3px 3px rgba(0, 0, 0, 0.1);
		}

		&:visited {
			color: #fff;
		}
	}
}