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

@mixin toast_state($color) {
	border-color: $color;

	.toast-header {
		color: $color;

		.ph {
			color: $color;
		}
	}

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

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

	background: $surface-panel;
	border: $border-width-base solid $border-color-muted;
	border-left-width: $border-width-accent;
	border-radius: $border-radius-md;
	box-shadow: 0 14px 36px rgba($color-black, 0.36);
	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-4 $space-5;
		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 {
			padding: $space-2 0 0;
			margin: 0;
			color: $color-text-light;
			font-size: $font-size-md;
			line-height: $line-height-relaxed;
		}
	}

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

		&:not(.without-hover) {
			@include hover_touch {
				color: $color-text-light;
				border-color: transparent;
			}
		}
	}

	.toast-progress {
		height: 3px;
		width: 100%;
		background: rgba($color-black, 0.45);
		overflow: hidden;
		margin-top: 1px;

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

	&.toast-info {
		@include toast_state($color-info);
	}

	&.toast-success {
		@include toast_state($color-success);
	}

	&.toast-warning {
		@include toast_state($color-warning);
	}

	&.toast-danger {
		@include toast_state($color-error);
	}
}

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