@import "variables";

.messenger {
	right: 10px;
	width: 350px;
	position: fixed;
	z-index: 2500;
	bottom: 10px;
	pointer-events: none;
	text-align: center;

	> div {
		position: relative;
		transform: translateX(0);
		margin-top: 2px;
		min-height: 50px;
		border-radius: 6px;
		background-color: $color-secondary-b-4;
		color: $color-secondary-b-2;
		pointer-events: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.1rem;
		box-shadow: 4px 4px 4px $color-secondary-b-1;
		transition: transform 500ms cubic-bezier(1,0,.35,1.45);

		&.removing {
			opacity: 0;
			transition: opacity;
			transition-timing-function: ease-out;

			&.short {
				transition-duration: 0.1s;
			}
			&.long {
				transition-duration: 2s;
			}
		}

		> .close {
			position: absolute;
			top: 2px;
			right: 2px;
			width: 12px;
			height: 12px;

			&:hover {
				cursor: pointer;

				&::before,
				&::after {
					background-color: red;
				}
			}

			&::before {
				content: "";
				position: absolute;
				width: 3px;
				height: 100%;
				background-color: $color-secondary-b-2;
				left: 50%;
				top: 0;

				transform: translateX(-50%) rotate(-45deg);
			}
			&::after {
				content: "";
				position: absolute;
				width: 3px;
				height: 100%;
				background-color: $color-secondary-b-2;
				left: 50%;
				top: 0;

				transform: translateX(-50%) rotate(45deg);
			}
		}

		&.in {
			transform: translateX(calc(100% + 10px));
		}
	}
}

@media (max-width: 586px) {
	.messenger {
		right: 0;
		bottom: 0;
		width: 100%;

		> div {
			margin: 5px 10px;
		}
	}
}

@media (min-width: 587px) and (max-width: 1151px) {
	.messenger {
		right: 0;
		bottom: 0;
		width: 450px;

		> div {
			margin: 5px 10px;
		}
	}
}