*,
*::before,
*::after {
	box-sizing: border-box;
}

.notice {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--g-spacing-md);
	padding: var(--g-spacing-md);
	border-radius: var(--g-border-radius-sm, 0.25rem);
	view-transition-name: notice;
	transition: opacity 0.5s;
}

.notice--info {
	color: var(--g-color-content-utility-info);
	background-color: var(--g-color-background-utility-info);
}

.notice--success {
	color: var(--g-color-content-utility-success);
	background-color: var(--g-color-background-utility-success);
}

.notice--warning {
	color: var(--g-color-content-utility-warning);
	background-color: var(--g-color-background-utility-warning);
}

.notice--error {
	color: var(--g-color-content-utility-error);
	background-color: var(--g-color-background-utility-error);
}

.notice__title {
	font-size: var(--g-typography-body-default-font-size);
	margin: 0;
}

.notice__icon {
	font-size: calc(var(--g-typography-body-default-line-height) * 1em);
}

.notice__content {
	flex-grow: 1;
}

.notice__close {
	background: none;
	color: inherit;
	opacity: 0.5;
	transition: 0.2s;
	font-size: calc(var(--g-typography-body-default-line-height) * 1em);
	line-height: 1;
	padding: var(--g-spacing-sm);
	margin: calc(-1 * var(--g-spacing-sm))
		calc(-1 * var(--g-spacing-sm)) 0 0;
	border: 0;

	&:hover,
	&:focus-visible {
		background: none;
		color: inherit;
		opacity: 1;
	}
}

.notice p {
	margin: 0;
}