@import "variables";

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	700% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.hamail-dynamics {

	&-toggle {
		+label {
			display: inline-block;
			width: 8em;
			position: relative;
			.active {
				display: none;
				color: $sg-blue;
			}
			.inactive {
				display: inline;
				color: #cbcbcb;
			}
			.dashicons {
				display: none;
				color: $sg-blue;
				opacity: 0.6;
			}

			&.loading {
				.dashicons {
					display: inline-block;
					animation: rotation 1s ease-in-out infinite;
				}
			}

			.message {
				position: absolute;
				color: $sg-blue;
				top: 100%;
				left: 0;
			}
		}
		&:checked + label {
			.active {
				display: inline;
			}
			.inactive {
				display: none;
			}
		}
	}

}