@use "../kit-deps" as *;
@use "typography" as *;

$alert-bg-alpha: 0.1;

.alert {
	position: relative;
	overflow: hidden;
	margin-bottom: $space-3;
	padding: $space-3 $space-4;
	border: $border-width-base solid transparent;
	border-left-style: $border-style-base;
	border-left-width: $border-width-accent;
	background: $surface-panel-muted;
	color: $color-text-light;
	font-weight: $font-weight-medium;
	line-height: $line-height-normal;
	transition-duration: $motion-base;
	transition-timing-function: $motion-ease;
	transition-property: background, color, border-color;

	&::after {
		content: "";
		position: absolute;
		inset: 0 auto 0 0;
		width: 36%;
		background: linear-gradient(90deg, transparent, rgba($color-text-light, 0.12), transparent);
		opacity: 0;
		pointer-events: none;
		transform: translateX(-120%);
	}

	@include hover_touch {
		&::after {
			opacity: 1;
			animation: terminal_scan_x 0.8s $motion-ease;
		}
	}

	&.alert-primary {
		border-color: $color-primary;
		background: rgba($color-primary, $alert-bg-alpha);
		color: $color-primary;
	}

	&.alert-success {
		border-color: $color-success;
		background: rgba($color-success, $alert-bg-alpha);
		color: $color-success;
	}

	&.alert-secondary {
		border-color: $color-secondary;
		background: rgba($color-secondary, $alert-bg-alpha);
		color: $color-secondary;
	}

	&.alert-info {
		border-color: $color-info;
		background: rgba($color-info, $alert-bg-alpha);
		color: $color-text-light;
	}

	&.alert-warning {
		border-color: $color-warning;
		background: rgba($color-warning, $alert-bg-alpha);
		color: $color-warning;
	}

	&.alert-error, &.alert-danger {
		border-color: $color-error;
		background: rgba($color-error, $alert-bg-alpha);
		color: $color-error;
	}
}