$notice-error: #cc1818;
$notice-warning: #f0b849;
$notice-info: #72aee6;
$notice-success: #43af99;

.wpjm-message {

	padding: 24px !important;
	background: var(--wpjm-brand-color-shade-2) !important;
	border: unset !important;
	border-radius: 2px;
	box-shadow: unset !important;
}

.wpjm-admin-notice {
	display: flex;
	flex-direction: column;

	color: #000000;

	border-radius: 2px;
	box-shadow: unset !important;
	background: var(--wpjm-brand-color-shade-2) !important;
	border: unset !important;

	gap: 10px;
	padding: 20px 24px;
	padding-right: calc(48px + 24px);
	transform-origin: top center;
	overflow: hidden;

	.wpjm-button {
		font-size: 13px;
	}

	.wp-core-ui &.is-dismissible {
		padding-right: 24px;
	}

	&__top {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
		gap: 20px;
	}

	&__icon {
		height: 100%;
		max-height: 52px;
		aspect-ratio: 1;
	}

	&__label {
		font-weight: 600;
		background: var(--wpjm-brand-color-shade-4);
		color: var(--wpjm-brand-color-primary);
		border-radius: 40px;
		padding: 6px 12px;
		display: inline-block;
		text-transform: uppercase;
		align-self: flex-start;
		font-size: 12px;
	}

	&__heading {
		font-weight: 700;
		font-size: 16px;
		letter-spacing: -0.36px;
		line-height: 1.2;
	}

	&__message {
		flex: 1 1 min-content;
		align-self: center;
		display: flex;
		flex-direction: column;
		gap: 10px;
		min-width: min(100%, 400px);
		line-height: 1.5;

		&, p {
			font-size: 14px;
		}

		ul {
			margin: 0;
			padding-left: 10px;
			list-style-type: '•';
		}
		li {
			padding-left: 10px;
		}


	}

	&__actions {
		display: flex;
		gap: 10px;
		align-items: center;
	}


	button.wpjm-notice-dismiss--icon {
		padding: 6px;
		color: inherit;
		position: static;

		&::before {
			color: inherit;
			content: '';
			background-color: currentColor;
			mask-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' fill=\'none\' viewBox=\'0 0 24 24\'%3e%3cpath fill=\'%23FFFFFF\' fill-rule=\'evenodd\' d=\'m12 13.06 3.71 3.71 1.06-1.06-3.7-3.71 3.7-3.71-1.06-1.06-3.71 3.7-3.71-3.7-1.06 1.06 3.7 3.71-3.7 3.71 1.06 1.06 3.71-3.7Z\' clip-rule=\'evenodd\'/%3e%3c/svg%3e');

			width: 24px;
			height: 24px;
		}
	}

	&__extra_details {
		font-size: 14px;
		border-radius: 2px;
		padding-right: 48px;
	}

	a:where(:not(.wpjm-button)) {
		color: inherit;
		text-decoration: underline;

		&:hover {
			color: var(--wpjm-brand-color-primary);
		}
	}

	&--landing {
		padding: 40px 40px;
		align-items: flex-start;
		flex-direction: row;
		justify-content: space-between;
	}
	&--landing &__top {
		flex-direction: column;
		gap: 20px;
		align-items: flex-start;
	}

	&--landing &__message {
		gap: 20px;
	}

	&--landing &__heading {
		font-size: 40px;
		letter-spacing: -0.8px;
	}

	&--landing &__image {
		max-width: 50%;
	}
	&--landing &__image img {
		max-width: 100%;
		max-height: 400px;
	}

}

.wpjm-addon-update-notice-info {
	// Layout.
	display: flex;
	flex-direction: row;
	padding: 0;
	margin: 10px 0;
	align-items: center;


	&__icon {
		width: 26px;
		aspect-ratio: 1;
		margin-right: 10px;

	}
	&__name {
		// Layout.
		flex: 50%;

		// Style.
		font-weight: 700;

		font-size: 14px;
		line-height: 1.5;
	}

	&__version {
		// Layout.
		flex: 50%;
		text-align: right;

		a {
			text-decoration: none;

			&:hover {
				text-decoration: underline;
			}
		}
	}
}
