/**
 * activation.scss
 * Styles applied to elements displayed on activation
 */

/**
 * Imports
 */
@import "variables/variables";

/**
 * Styling begins
 */
div.everest-forms-message {
	overflow: hidden;
	position: relative;
	border-left-color: $everestforms !important;

	&.evf-review-notice {
		padding: 16px;
		display: flex;
		align-items: center;

		.everest-forms-logo {
			height: 120px;
			width: 120px;
			border-radius: 4px;
			margin-right: 20px;
			flex: 0 0 120px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: $everestforms;

			svg {
				height: 80px;
				width: 80px;
				fill: $color-white;
			}
		}

		.everest-forms-message--content {
			h3 {
				margin: 0;
				font-size: 20px;
				line-height: 1.5;
			}

			p {
				margin-top: 4px;
				padding: 0;

				&.submit {
					margin-top: 9px;
					margin-bottom: 0;

					.button {
						margin-right: 5px;
					}

					.evf-button-link {
						padding: 0 2px 0;
						box-shadow: none;
					}
				}
			}
		}
	}

	&.evf-survey-notice {
		padding: 16px;
		display: flex;
		align-items: center;

		.everest-forms-logo {
			height: 120px;
			width: 120px;
			border-radius: 4px;
			margin-right: 20px;
			flex: 0 0 120px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: $everestforms;

			svg {
				height: 80px;
				width: 80px;
				fill: $color-white;
			}
		}

		.everest-forms-message--content {
			h3 {
				margin: 0;
				font-size: 20px;
				line-height: 1.5;
			}

			p {
				margin-top: 4px;
				padding: 0;

				&.submit {
					margin-top: 9px;
					margin-bottom: 0;

					.button {
						margin-right: 5px;
					}

					.evf-button-link {
						padding: 0 2px 0;
						box-shadow: none;
					}
				}
			}
		}
	}

	&.evf-allow-usage-notice {
		padding: 16px;
		display: flex;
		align-items: center;

		.everest-forms-logo {
			height: 120px;
			width: 120px;
			border-radius: 4px;
			margin-right: 20px;
			flex: 0 0 120px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: $everestforms;

			svg {
				height: 80px;
				width: 80px;
				fill: $color-white;
			}
		}

		.everest-forms-message--content {
			h3 {
				margin: 0;
				font-size: 20px;
				line-height: 1.5;
			}

			p {
				margin-top: 4px;
				padding: 0;

				&.submit {
					margin-top: 9px;
					margin-bottom: 0;

					.button {
						margin-right: 5px;
					}

					.evf-button-link {
						padding: 0 2px 0;
						box-shadow: none;
					}
				}
			}
		}
	}

	a.everest-forms-message-close {
		position: static;
		float: right;
		top: 0;
		right: 0;
		padding: 0px 15px 10px 28px;
		margin-top: -10px;
		font-size: 13px;
		line-height: 1.23076923;
		text-decoration: none;

		&:before {
			position: relative;
			top: 18px;
			left: -20px;
			transition: all 0.1s ease-in-out;
		}
	}

	.button-primary,
	.button-secondary {
		text-decoration: none !important;
	}
	.everest-forms-message__action.submit .button-primary {
		background: #7e3bd0;
		border-color: #7e3bd0;
	}
	a.button.button-secondary.evf-dismiss-review-notice,
	a.button.button-secondary.evf-have-query {
		color: #7e3bd0;
		border-color: #7e3bd0;
	}
	.everest-forms-message__action.submit .button-primary.focus,
	.everest-forms-message__action.submit .button-primary.hover,
	.everest-forms-message__action.submit .button-primary:focus,
	.everest-forms-message__action.submit .button-primary:hover {
		background: #532986;
		border-color: #532986;
		color: #fff;
	}
	.everest-forms-message--content span.dashicons {
		margin: 3px 4px 0 0px;
	}
	.smile-icon {
		background: #e7e94b;
		padding: 2px;
		font-size: 18px;
		border-radius: 50%;
	}
}