.chat-window-wrapper {
	position: fixed;
	display: flex;
	flex-direction: column;
	bottom: var(--chat--window--bottom);
	right: var(--chat--window--right);
	z-index: var(--chat--window--z-index);

	max-width: calc(
		100% - var(--chat--window--right, var(--chat--spacing)) * 2
	);
	max-height: calc(
		100% - var(--chat--window--bottom, var(--chat--spacing)) * 2
	);
}

.chat-window {
	display: flex;
	width: var(--chat--window--width);
	height: var(--chat--window--height);
	max-width: 100%;
	max-height: 100%;
	border: var(
		--chat--window--border,
		1px solid var(--chat--color-light-shade-100)
	);
	border-radius: var(
		--chat--window--border-radius,
		var(--chat--border-radius)
	);
	margin-bottom: var(--chat--window--margin-bottom, var(--chat--spacing));
	overflow: hidden;
	transform-origin: bottom right;
	background: transparent;
	transform: scale(0);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		transform var(--chat--transition-duration) ease,
		opacity var(--chat--transition-duration) ease;

	.chat-layout {
		width: auto;
		height: 100%;
		flex: 1 1 100%;
		min-height: 0;
	}

	.chat-wrapper {
		flex: 1 1 100%;
		min-width: 0;
		width: 100%;
	}

	&.chat-window--open {
		transform: scale(1);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}
}

.chat-window-toggle {
	flex: 0 0 auto;
	padding: initial;
	box-shadow: 0 7px 16px 0 rgba(0,0,0,.2);
	background: var(--chat--toggle--background);
	color: var(--chat--toggle--color);
	cursor: pointer;
	width: var(--chat--toggle--width);
	height: var(--chat--toggle--height);
	border-radius: var(--chat--toggle--border-radius, 50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	transition:
		transform var(--chat--transition-duration) ease,
		background var(--chat--transition-duration) ease;
	border: none;

	&:hover,
	&:focus {
		transform: scale(1.05);
		background: var(--chat--toggle--hover--background);
	}

	&:active {
		transform: scale(0.95);
		background: var(--chat--toggle--active--background);
	}
}