/*
 * PureCSS.com
 * https://purecss.com/examples/alert-banner/
 * Info, success, warning, and error alert variants styled with CSS custom properties.
 */

.demo-alert-banner .alerts {
		display: flex;
		flex-direction: column;
		gap: .65rem;
	}

.demo-alert-banner .alert {
		display: flex;
		align-items: flex-start;
		gap: .75rem;
		padding: .85rem 1rem;
		border-radius: var(--radius);
		border-left: 3px solid;
		font-size: .9rem;
		line-height: 1.5;
	}

.demo-alert-banner .alert-icon {
		font-size: 1rem;
		flex-shrink: 0;
		margin-top: .05rem;
	}

.demo-alert-banner .alert-body {
		flex: 1;
	}

:is(.demo-alert-banner .alert-body) strong {
			display: block;
			font-size: .875rem;
			font-weight: 600;
			margin-bottom: .1rem;
		}

.demo-alert-banner .alert-info {
		background: var(--sky-dim);
		border-color: var(--sky);
		color: var(--sky);
	}

.demo-alert-banner .alert-success {
		background: rgba(87,217,163,.1);
		border-color: var(--teal);
		color: var(--teal);
	}

.demo-alert-banner .alert-warning {
		background: var(--yellow-dim);
		border-color: var(--yellow);
		color: var(--yellow);
	}

.demo-alert-banner .alert-error {
		background: var(--coral-dim);
		border-color: var(--coral);
		color: var(--coral);
	}

/* Dismissible variant */

.demo-alert-banner .alert-dismiss-input {
		display: none;
	}

.demo-alert-banner .alert-dismissible {
		position: relative;
		transition: opacity .2s, max-height .3s;
	}

.demo-alert-banner .alert-close {
		margin-left: auto;
		cursor: pointer;
		opacity: .6;
		font-size: 1rem;
		line-height: 1;
		flex-shrink: 0;
		user-select: none;
	}

:is(.demo-alert-banner .alert-close):hover {
			opacity: 1;
		}

.demo-alert-banner .alert-dismiss-input:checked ~ .alert-dismissible {
		display: none;
	}