@import "../../../../assets/dev/scss/helpers/variables";
@import "../../../../app/assets/styles/tokens/_font";

$base-color: var(--e-a-color-txt-accent);
$button-base-color: var(--e-a-btn-bg-accent);
$button-base-color-hover: var(--e-a-btn-bg-accent-hover);
$description-color: var(--e-a-color-txt);

#e-announcements-root {
	position: fixed;
	display: flex;
	inset: 0;
	align-items: center;
	justify-content: center;
	color: var(--e-a-color-txt);
	font-family: $admin-font-family;
	z-index: $element-overlay;

	.announcements-container {
		width: 640px;
		max-width: 100%;
		background-color: var(--e-a-bg-default);
		border-radius: var(--e-a-border-radius);
		z-index: $element-overlay;

		.announcements-heading-container {
			display: flex;
			align-items: center;
			padding: 16px 32px;
			border-block-end: var(--e-a-border);

			.eicon-elementor {
				color: var(--e-a-color-logo);
				background-color: var(--e-a-bg-logo);
				border-radius: 50%;
				padding: 8px;
			}

			.heading-title {
				margin-inline-start: 12px;
				text-transform: uppercase;
				font-weight: 700;
				color: var(--e-a-color-txt-active);
			}

			.close-button {
				margin-inline-start: auto;
				background: none;
				color: inherit;
				border: none;
				padding: 0;
				font: inherit;
				cursor: pointer;
				outline: inherit;

				&:hover {
					color: var(--e-a-color-txt-hover);
				}
			}
		}

		.announcement-body-container {
			.announcement-body-media img {
				width: 100%;
				max-height: 360px;
				object-fit: contain;
			}

			.announcement-body-content{
				padding: 30px;

				.announcement-body-title {
					font-size: 18px;
					font-weight: 700;
					color: $base-color;
					padding-block-end: 15px;
				}

				.announcement-body-description {
					font-size: 16px;
					line-height: 24px;
					font-weight: $eps-font-weight-normal;
					color: $description-color;
				}

				p {
					margin-block-end: 15px;
				}

				ul {
					margin-inline-start: 20px;
					margin-block-end: 15px;
				}

				li {
					list-style: disc;
					margin-block-end: 5px;
				}
			}
		}

		.announcement-footer-container {
			display: flex;
			flex-direction: row-reverse;
			padding: 12px 32px 32px;

			.button-item {
				margin-inline-start: 12px;
				padding: 8px 16px;
				outline: none;
				border: none;
				border-radius: var(--e-a-border-radius);
				transition: var(--e-a-transition-hover);
				background: transparent;
				color: var(--e-a-color-txt);
				cursor: pointer;

				&:hover {
					background: var(--e-a-bg-hover);
					color: var(--e-a-color-txt-hover);
				}

				&:disabled {
					background: transparent;
					color: var(--e-a-color-txt-disabled);
				}

				&.primary {
					background-color: var(--e-a-btn-bg-accent);
					color: var(--e-a-btn-color-invert);

					&:hover {
						background-color: var(--e-a-btn-bg-accent-hover);
					}

					&:active {
						background-color: var(--e-a-btn-bg-accent-active);
					}
				}
			}
		}
	}

	.announcements-screen-overlay {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
	}
}
