//
// Football Pool WordPress plugin
//
// @copyright Copyright (c) 2026 Antoine Hurkmans
// @link https://wordpress.org/plugins/football-pool/
// @license https://plugins.svn.wordpress.org/football-pool/trunk/LICENSE
//

//noinspection SassScssResolvedByNameOnly
#fp-toasts {
	min-height: 0;
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 400px;
	z-index: 10;

	.toast {
		background: #d6d8d9;
		border-radius: 3px;
		box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
		color: rgba(0, 0, 0, 0.6);
		cursor: default;
		margin-bottom: 20px;
		opacity: 0;
		position: relative;
		padding: 10px;
		transform: translateY(15%);
		transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
		width: 100%;
		will-change: opacity, transform;
		z-index: 1100;
	}

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

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

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

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

	.toast.show {
		opacity: 1;
		transform: translateY(0);
		transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
	}

	.toast.hide {
		height: 0;
		margin: 0;
		opacity: 0;
		overflow: hidden;
		padding: 0 30px;
		transition: all 0.5s ease-in-out;
	}

	.toast .close {
		cursor: pointer;
		font-size: 24px;
		height: 16px;
		margin-top: -10px;
		position: absolute;
		right: 14px;
		top: 50%;
		width: 16px;
	}
}

//noinspection SassScssResolvedByNameOnly
@media ( max-width: $mobile-width ) {
	#fp-toasts {
		right: 10px;
		bottom: 10px;
		max-width: calc(100vw - 20px);
		z-index: 10;
	}
}