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

.toast {
	position: fixed;
	z-index: 1100;
	bottom: -100px;
	right: $space-4;
	max-width: 420px;

	background: $surface-panel;
	border: $border-width-base solid $color-text-light;
	border-left-width: $border-width-accent;
	padding: 0;
	opacity: 0;
	overflow: hidden;

	transition-duration: $motion-slow;
	transition-timing-function: $motion-ease;
	transition-property: opacity, bottom;

	&.a-show {
		bottom: $space-4;
		opacity: 1;
	}

	&.a-hide {
		bottom: $space-4 - 60px;
		opacity: 0;
	}

	.toast-content {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: $space-3 $space-4;
		padding-right: $space-10;

		.toast-header {
			display: flex;
			align-items: center;
			gap: $space-2;
			font-size: $font-size-sm;
			font-weight: $font-weight-bold;
			text-transform: uppercase;
			color: $color-text-light;
			line-height: $line-height-base;

			.ph {
				font-size: $icon-size-md;
				flex-shrink: 0;
			}
		}

		.toast-text {
			font-size: $font-size-sm;
			padding: $space-2 0 0;
			margin: 0;
			color: $color-text-medium;
			line-height: $line-height-normal;
		}
	}

	.toast-close {
		position: absolute;
		top: $space-1;
		right: $space-2;
		color: $color-text-light;
		width: $control-height-sm;
		height: $control-height-sm;
		border-color: transparent;
		background: transparent;
	}

	.toast-progress {
		height: 3px;
		width: 100%;
		background: $surface-page;
		overflow: hidden;
		margin-top: 1px;

		.toast-progress-bar {
			height: 100%;
			width: 100%;
			transform-origin: left;
			animation: toast-progress linear forwards;
			background: $color-primary;
		}
	}

	&.toast-info {
		border-color: $color-info;
		background: rgba($color-info, 0.18);

		.toast-header .ph {
			color: $color-info;
		}

		.toast-progress-bar {
			background: $color-info;
		}
	}

	&.toast-success {
		border-color: $color-success;
		background: rgba($color-success, 0.18);

		.toast-header .ph {
			color: $color-success;
		}

		.toast-progress-bar {
			background: $color-success;
		}
	}

	&.toast-warning {
		border-color: $color-warning;
		background: rgba($color-warning, 0.18);

		.toast-header .ph {
			color: $color-warning;
		}

		.toast-progress-bar {
			background: $color-warning;
		}
	}

	&.toast-danger {
		border-color: $color-error;
		background: rgba($color-error, 0.18);

		.toast-header .ph {
			color: $color-error;
		}

		.toast-progress-bar {
			background: $color-error;
		}
	}
}

@keyframes toast-progress {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}