mytril/dist/styles/alert.css

Mytril Svelte library component for rapidly building modern websites based on Svelte and Sveltekit

.myt-alert {
	--c: var(--myt-alert-c);
	--bg: var(--myt-alert-bg);

	display: grid;
	flex: 1 1;
	grid-template-areas:
		'prepend content append close'
		'. content . .';
	grid-template-columns: max-content auto max-content max-content;
	position: relative;
	padding: 1rem;
	overflow: hidden;
	color: var(--c);
	background-color: var(--bg);
	border-radius: var(--myt-alert-br);
	transition:
		color 0.5s,
		background-color 0.5s;
}

.myt-alert .myt-alert--underlay {
	grid-area: none;
	position: absolute;
	background-color: var(--bg);
	border-radius: inherit;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
}

.myt-alert.myt-alert--outline {
	border: thin solid currentColor;
	background-color: transparent;
}

.myt-alert--density-default {
	padding-bottom: 1rem;
	padding-top: 1rem;
}
.myt-alert--density-comfortable {
	padding-bottom: 0.75rem;
	padding-top: 0.75rem;
}
.myt-alert--density-compact {
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
}

.myt-alert .myt-alert--prepend {
	align-self: flex-start;
	display: flex;
	align-items: center;
	grid-area: prepend;
	margin-inline-end: 1rem;
}

.myt-alert .myt-alert--content {
	align-self: center;
	grid-area: content;
	overflow: hidden;
}

.myt-alert .myt-alert--close {
	align-self: flex-start;
	margin-inline-start: 1rem;
	flex: 0 1 auto;
	grid-area: close;
}

.myt-alert.myt-alert--variant-tonal {
	padding-inline-start: 1.5rem;
}

.myt-alert .myt-alert--border {
	border-inline-start-width: 0.5rem !important;
	border-color: var(--c);
	border-style: solid;
	border-width: 0;
	border-radius: inherit;
	bottom: 0;
	left: 0;
	opacity: 1;
	position: absolute;
	pointer-events: none;
	right: 0;
	top: 0;
	width: 100%;
}

.myt-alert.myt-alert--info:not(.myt-alert--outline) {
	--c: var(--color-on-info);
	--bg: var(--color-info);
}
.myt-alert.myt-alert--info.myt-alert--outline {
	--c: var(--color-info);
}
.myt-alert.myt-alert--info.myt-alert--variant-tonal {
	--bg: var(--color-info-container);
	--c: var(--color-on-info-container);
}

.myt-alert.myt-alert--success:not(.myt-alert--outline) {
	--c: var(--color-on-success);
	--bg: var(--color-success);
}
.myt-alert.myt-alert--success.myt-alert--outline {
	--c: var(--color-success);
}
.myt-alert.myt-alert--success.myt-alert--variant-tonal {
	--bg: var(--color-success-container);
	--c: var(--color-on-success-container);
}

.myt-alert.myt-alert--warning:not(.myt-alert--outline) {
	--c: var(--color-on-warning);
	--bg: var(--color-warning);
}
.myt-alert.myt-alert--warning.myt-alert--outline {
	--c: var(--color-warning);
}
.myt-alert.myt-alert--warning.myt-alert--variant-tonal {
	--bg: var(--color-warning-container);
	--c: var(--color-on-warning-container);
}

.myt-alert.myt-alert--error:not(.myt-alert--outline) {
	--c: var(--color-on-error);
	--bg: var(--color-error);
}
.myt-alert.myt-alert--error.myt-alert--outline {
	--c: var(--color-error);
}
.myt-alert.myt-alert--error.myt-alert--variant-tonal {
	--bg: var(--color-error-container);
	--c: var(--color-on-error-container);
}

.myt-alert-title {
	align-items: center;
	align-self: center;
	display: flex;
	font-size: 1.25rem;
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: normal;
	word-break: normal;
	word-wrap: break-word;
}