mailymaily/src/mailgo.scss

$mailgo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
	"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

// colors
$default-color: #4a4a4a;
$gmail-color: #c0372a;
$outlook-color: #0967aa;
$wa-color: #067466;
$telegram-color: #086da0;
$skype-color: #076d92;

$default-color-hover: #3d3d3d;

$default-dark-color: #eaeaea;
$gmail-dark-color: #e07d73;
$outlook-dark-color: #4c9cd7;
$wa-dark-color: #4cd2c0;
$telegram-dark-color: #4cabdb;
$skype-dark-color: #4cc7f4;

// other vars
$default-border-radius: 20px;

.m-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	overflow: hidden;
	font-size: 16.5px;
	z-index: 10000;

	p,
	span,
	strong,
	a {
		margin: 0;
		padding: 0;
		font-size: 100%;
		line-height: 1;
		font-family: $mailgo-font-family;
		text-rendering: optimizeLegibility;
	}

	strong {
		font-weight: 700;
	}

	.m-modal-back {
		position: absolute;
		z-index: 10001;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #20232a;
		opacity: 0.8;
	}

	.m-modal-content {
		position: relative;
		z-index: 10002;
		box-sizing: content-box;
		text-align: center;
		min-width: 200px;
		max-width: 240px;
		background-color: #fff;
		opacity: 0.95;
		border-radius: $default-border-radius;
		box-shadow: 0 3px 20px rgba(32, 35, 42, 0.5);
		color: $default-color;
		display: flex;
		flex-direction: column;
		overflow: auto;
		padding: 24px;
		transition: 0.5s box-shadow;

		&:hover,
		&:focus,
		&:active {
			opacity: 1;
		}

		.m-title {
			margin-bottom: 8px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			line-height: 1.2em;
		}

		.m-details {
			margin-bottom: 10px;
			p {
				font-size: 12px;
				margin-top: 3px;
				margin-bottom: 3px;
			}
		}

		a {
			cursor: pointer;
			padding: 10px;
			color: $default-color;
			border-radius: $default-border-radius;
			text-decoration: none;

			&.m-gmail {
				color: $gmail-color;
				&:hover,
				&:focus,
				&:active {
					background-color: rgba(212, 70, 56, 0.08);
					color: $gmail-color;
				}
			}

			&.m-outlook {
				color: $outlook-color;
				&:hover,
				&:focus,
				&:active {
					background-color: rgba(0, 114, 198, 0.08);
					color: $outlook-color;
				}
			}

			&.m-tg {
				color: $telegram-color;
				&:hover,
				&:focus,
				&:active {
					background-color: rgba(0, 136, 204, 0.08);
					color: $telegram-color;
				}
			}

			&.m-wa {
				color: $wa-color;
				&:hover,
				&:focus,
				&:active {
					background-color: rgba(0, 191, 165, 0.08);
					color: $wa-color;
				}
			}

			&.m-skype {
				color: $skype-color;
				&:hover,
				&:focus,
				&:active {
					background-color: rgba(0, 175, 240, 0.08);
					color: $skype-color;
				}
			}

			&.m-copy {
				padding: 16px 10px;
				font-size: 16px;
			}

			&.m-default,
			&.m-copy {
				&:hover,
				&:focus,
				&:active {
					background-color: rgba(0, 0, 0, 0.08);
					color: $default-color;
				}
			}

			&.m-by {
				font-size: 12px;
				margin-top: 0.8rem;
				padding: 5px;
				color: $default-color;
				&:hover,
				&:focus,
				&:active {
					color: $default-color-hover;
				}
			}
		}

		.w-500 {
			font-weight: 500;
		}
	}

	&.m-dark {
		.m-modal-content {
			background-color: #20232a;
			&,
			& p,
			& p span,
			& strong {
				color: #fff;
			}
			a {
				color: $default-dark-color;

				&:not(.m-by) {
					&:hover,
					&:focus,
					&:active {
						background-color: rgba(134, 134, 134, 0.08);
						color: $default-dark-color;
					}
				}

				&.m-gmail {
					color: $gmail-dark-color;

					&:hover,
					&:focus,
					&:active {
						background-color: rgba(212, 70, 56, 0.08);
						color: $gmail-dark-color;
					}
				}

				&.m-outlook {
					color: $outlook-dark-color;

					&:hover,
					&:focus,
					&:active {
						background-color: rgba(0, 114, 198, 0.08);
						color: $outlook-dark-color;
					}
				}

				&.m-tg {
					color: $telegram-dark-color;

					&:hover,
					&:focus,
					&:active {
						background-color: rgba(0, 136, 204, 0.08);
						color: $telegram-dark-color;
					}
				}

				&.m-wa {
					color: $wa-dark-color;

					&:hover,
					&:focus,
					&:active {
						background-color: rgba(0, 191, 165, 0.08);
						color: $wa-dark-color;
					}
				}

				&.m-skype {
					color: $skype-dark-color;

					&:hover,
					&:focus,
					&:active {
						background-color: rgba(0, 175, 240, 0.08);
						color: $skype-dark-color;
					}
				}

				&.m-by {
					&:hover,
					&:focus,
					&:active {
						color: #fff;
					}
				}
			}
		}
	}
}