:root {
	/* stylelint-disable-next-line property-no-unknown */
	interpolate-size: allow-keywords;
}

.newspack-ui {
	.newspack-ui {
		&__notice {
			align-items: center;
			background: var(--newspack-ui-color-neutral-5);
			border-left-width: 3px;
			border-left-style: solid;
			border-left-color: var(--newspack-ui-color-neutral-90);
			border-radius: var(--newspack-ui-border-radius-xs);
			color: var(--newspack-ui-color-neutral-90);
			display: flex;
			font-size: var(--newspack-ui-font-size-xs);
			justify-content: flex-start;
			margin: var(--newspack-ui-spacer-6) 0;
			padding: var(--newspack-ui-spacer-3);
			padding-left: calc(var(--newspack-ui-spacer-3) - 3px);

			a {
				text-decoration: underline;
			}

			> svg {
				display: block;
				fill: var(--newspack-ui-color-neutral-90);
				flex: 0 0 24px;
				margin-right: var(--newspack-ui-spacer-base);
			}

			// Backgrounds & Borders
			&--success {
				background: var(--newspack-ui-color-success-0);
				border-left-color: var(--newspack-ui-color-success-50);

				> svg {
					fill: var(--newspack-ui-color-success-60);
				}
			}

			&--warning {
				background: var(--newspack-ui-color-warning-0);
				border-left-color: var(--newspack-ui-color-warning-30);

				> svg {
					fill: var(--newspack-ui-color-warning-40);
				}
			}

			&--error {
				background: var(--newspack-ui-color-error-0);
				border-left-color: var(--newspack-ui-color-error-50);

				> svg {
					fill: var(--newspack-ui-color-error-60);
				}
			}

			// Some style resets.
			> div > *:first-child {
				margin-top: 0;
				padding-top: 0;
			}

			> div > *:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
			}
		}
		&__snackbar {
			max-width: 410px;
			color: var(--newspack-ui-color-body-bg);
			font-size: var(--newspack-ui-font-size-xs);
			left: var(--newspack-ui-spacer-2);
			position: fixed;
			top: var(--newspack-ui-spacer-2);
			z-index: 99997;
			pointer-events: none;
			&--top-right {
				left: auto;
				right: var(--newspack-ui-spacer-2);
			}
			&--bottom-left {
				left: var(--newspack-ui-spacer-2);
				top: auto;
				bottom: var(--newspack-ui-spacer-2);
			}
			&--bottom-right {
				left: auto;
				right: var(--newspack-ui-spacer-2);
				top: auto;
				bottom: var(--newspack-ui-spacer-2);
			}
			.admin-bar & {
				@media only screen and ( min-width: 601px ) {
					top: calc(46px + var(--newspack-ui-spacer-2));
				}
				@media only screen and ( min-width: 782px ) {
					top: calc(32px + var(--newspack-ui-spacer-2));
				}
			}
			&__item {
				pointer-events: none;
				height: 0;
				transition: height 125ms ease-out;
				overflow: hidden;
				&.active {
					height: auto;
					pointer-events: auto;
					transition: none;
				}
				&--success {
					border-color: var(--newspack-ui-color-success-60);
				}
				&--error {
					border-color: var(--newspack-ui-color-error-60);
				}
				&--warning {
					border-color: var(--newspack-ui-color-warning-40);
				}
			}
			&__content {
				background-color: var(--newspack-ui-color-neutral-90);
				border-radius: var(--newspack-ui-border-radius-s);
				margin-bottom: var(--newspack-ui-spacer-2);
				padding: var(--newspack-ui-spacer-2);
				border-bottom-width: 3px;
				border-bottom-style: solid;
				border-bottom-color: inherit;
				a {
					text-decoration: underline;
				}
			}
			&__close {
				background: none;
				border: none;
				cursor: pointer;
				float: right;
				padding: 0;
				margin: var(--newspack-ui-spacer-2);
				display: block;
				width: var(--newspack-ui-font-size-l);
				height: var(--newspack-ui-font-size-l);
			}
		}
	}
}
