// Flyout Menu styles.

@import "variables";

#wp-mail-smtp-flyout {
	$start: 75px;
	$step: 55px;
	$trans: 0.2s;
	$delay: 35ms;

	position: fixed;
	z-index: 99999;
	transition: all $trans ease-in-out;
	right: 40px;
	bottom: 40px;
	opacity: 1;

	@include media('<desktop') {
		display: none;
	}

	.wp-mail-smtp-flyout-head {
		display: block;

		&:focus {
			box-shadow: none;
		}

		figure {
			margin: 0;
			border-radius: 50%;
			border: 3px solid $orange;
			overflow: hidden;
			box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
			background-color: #fff;
			transition: all $trans ease-in-out;

			img {
				display: block;
				width: 54px;
				height: 54px;
				transition: all $trans ease-in-out;
			}
		}

		&:hover figure {
			box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
		}

		.wp-mail-smtp-flyout-label {
			right: calc(100% + 15px);
			opacity: 0;
			transform: translateY(-50%) scale(0);
			margin-right: -50px;
		}

		&:hover .wp-mail-smtp-flyout-label {
			opacity: 1;
			transform: translateY(-50%) scale(1);
			margin-right: 0;
		}
	}

	.wp-mail-smtp-flyout-label {
		position: absolute;
		display: block;
		top: 50%;
		right: calc(100% + 15px);
		transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		color: #fff;
		background-color: #A7AAAD;
		font-size: 12px;
		white-space: nowrap;
		padding: 6px 10px;
		height: auto !important;
		line-height: initial;
		transition: all $trans ease-out;
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
	}

	.wp-mail-smtp-flyout-item {
		position: absolute;
		display: flex;
		left: 10px;
		width: 40px;
		height: 40px;
		opacity: 0;
		visibility: hidden;
		transition: all $trans ease-in-out;
		transform: scale(0);
		border-radius: 50%;
		box-shadow: $shadow-lg;
		background-color: #738E9E;

		img {
			margin: auto;
		}

		@for $i from 0 through 4 {
			&.wp-mail-smtp-flyout-item-#{$i} {
				bottom: $start + $i * $step;
			}
		}

		&:hover {
			background-color: #395360;

			.wp-mail-smtp-flyout-label {
				background-color: #787C82;
			}
		}
	}

	&.opened {

		.wp-mail-smtp-flyout-item {
			opacity: 1;
			visibility: visible;
			transform: scale(1);
		}

		.wp-mail-smtp-flyout-head {

			.wp-mail-smtp-flyout-label {
				display: none;
			}

			figure img {
				transform: rotate(-15deg) scale(1.17);
			}
		}

		@for $i from 0 through 4 {
			.wp-mail-smtp-flyout-item-#{$i} {
				transition: transform $trans $i * $delay, background-color $trans;
			}
		}
	}

	&.out {
		opacity: 0;
		visibility: hidden;
	}
}
