@use '../abstracts/cds-vars' as vars;
@use '../abstracts/cds-mixins' as mixins;
@use '../abstracts/cds-config' as config;

$_cds-toast-border-radius: var(--cds-toast-br) !default;

.cds-toast-container {
	position: fixed;
	top: 0;
	right: 0;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	flex-direction: column;
	gap: vars.$cds-spacing-100;
	padding: vars.$cds-spacing-100;
	z-index: vars.$cds-layer-fixed;
	width: 100%;
	pointer-events: none;
}

//COMPONENT
.cds-toast {
	//z-index: vars.$cds-layer-fixed;
	height: auto;
	display: flex;
	align-items: center;
	padding: vars.$cds-spacing-100;
	gap: vars.$cds-spacing-25;
	border-radius: $_cds-toast-border-radius;
	justify-content: left;
	gap: vars.$cds-spacing-100;
	transform: translateX(150%);
	//opacity: 0;
	transition: transform vars.$cds-transition-default ease-in-out; //, opacity vars.$cds-transition-default ease-in-out;
	width: 100%;
	pointer-events: all;
	padding-right: 3rem; //Reserve for close button

	&::after {
		content: "";
		width: calc(var(--progress-width) - 4px);
		height: 4px;
		bottom: 2px;
		left: 2px;
		border-radius: 999rem;
		position: absolute;
	}

	/* DEFAULT */
	@include mixins.cds-feedback(success);
	max-width: vars.$cds-toast-m;

	&.show {
		transform: translateX(0);
		//opacity: 1;
	}

	&__close {
		@include mixins.cds-icon(config.$default-icon-close);
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		height: fit-content;
		position: absolute;
		top: vars.$cds-spacing-100;
		right: vars.$cds-spacing-100;

		&::before {
			@include mixins.cds-icon-size(vars.$cds-icon-150);
		}

		&:hover {
			opacity: 0.5;
		}
	}

	//CONTAINERS
	&__content {
		display: flex;
		flex-direction: column;
		gap: vars.$cds-spacing-25;
		padding-block: vars.$cds-spacing-25;
		width: calc(100% - vars.$cds-spacing-300);
	}

	//ELEMENTS
	//&__icon {
	&::before {
		@include mixins.cds-icon-size(vars.$cds-icon-200);
	}

	&__title {
		@include mixins.cds-paragraph-l(bold);
	}

	&__text {
		@include mixins.cds-paragraph-m;
	}


	//SIZE MODIFIERS
	&--small {
		max-width: vars.$cds-toast-s;
	}

	&--medium {
		max-width: vars.$cds-toast-m;
	}

	&--large {
		max-width: vars.$cds-toast-l;
	}

	//FEEDBACK MODIFIERS
	&--error {
		@include mixins.cds-feedback(error);
	}

	&--success {
		@include mixins.cds-feedback(success);
	}

	&--alert {
		@include mixins.cds-feedback(alert);
	}

	&--information {
		@include mixins.cds-feedback(information);
	}

	&--neutral {
		@include mixins.cds-feedback(neutral);
	}

}