@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;

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

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

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

	.toast-content {
		display: flex;
		flex-direction: column;
		gap: 0;

		.toast-title {
			min-height: $control-height-sm;
			font-size: $font-size-lg;
			display: flex;
			flex-direction: row;
			gap: $space-2;
			align-items: center;
			color: $color-black;
			background: $color-primary;
			padding: $space-2 $space-3;
			padding-right: $space-9;
			text-transform: uppercase;
		}

		.toast-text {
			font-size: $font-size-sm;
			padding: $space-6 $space-4;
			margin: 0;
		}
	}

	.toast-close {
		position: absolute;
		top: 0;
		right: 0;
		color: $color-black;
		height: $control-height-sm;
		width: $control-height-sm;
		border-color: transparent;

		@include hover_touch {
			color: $color-black;
			background: rgba($color-black, 0.12);
			border-color: rgba($color-black, 0.42);
		}
	}

	&.toast-info {
		border-color: $color-info;

		.toast-title {
			background: $color-info;
		}
	}

	&.toast-success {
		border-color: $color-success;

		.toast-title {
			background: $color-success;
		}
	}

	&.toast-warning {
		border-color: $color-warning;

		.toast-title {
			background: $color-warning;
		}
	}

	&.toast-danger {
		border-color: $color-error;

		.toast-title {
			background: $color-error;
		}
	}
}