.e-notice-bar {
	position: absolute;
	width: 100%;
	inset-block-end: 0;
	display: flex;
	align-items: center;
	height: 40px;
	color: #fff;
	background-color: var(--e-a-color-accent);
	padding: 0 25px;

	&__message {

		a {
			text-decoration: underline;
			color: var(--e-a-color-txt-invert);

			&:hover {
				color: $editor-lightest;
			}
		}
	}

	&__primary_action {
		margin-inline: 12px;

		a {
			background: $white;
			border-radius: 3px;
			color: $editor-accent;
			padding: 4px 10px;
			font-size: 11px;

			&:hover {
				color: darken($editor-accent, 15%);
				background: $editor-background-light;
			}
		}
	}

	&__secondary_message,
	&__secondary_action {
		font-size: 11px;
	}

	&__secondary_action {
		margin-inline: 4px;

		a {
			color: $white;
			text-decoration: underline;

			&:hover {
				color: $gray-lighter;
			}
		}
	}

	&__close {
		cursor: pointer;
		margin-inline-start: auto;
	}

	&__icon {
		margin-inline-end: 8px;
	}

	i {
		font-size: 16px;
		opacity: .9;

		&:hover {
			color: $editor-lightest;
		}
	}

	a,
	i {
		transition: var(--e-a-transition-hover);
	}
}

body:not(.elementor-device-desktop) {
	#e-notice-bar {
		display: none;
	}
}
