.yith-wcwl-react-preview-toggle__wrapper {
	position      : fixed;
	bottom        : 0;
	right         : 50px;
	background    : white;
	width         : 400px;
	border        : 3px solid #e6e6e6;
	border-bottom : none;
	padding       : 20px;
	border-radius : 10px 10px 0 0;
	z-index       : 999;
	box-shadow    : 0 0 15px rgba(165, 165, 165, .3);

	.yith-wcwl-react-preview-toggle__header {
		display     : flex;
		align-items : center;
		gap         : 10px;

		&-icon {
			display : flex;

			svg {
				width : 30px;
			}
		}

		&-title {
			margin         : 0;
			flex-grow      : 2;
			text-transform : uppercase;
			font-weight    : bold;
		}

		&-toggle-button {
			display       : flex;
			background    : #f1f1f1;
			padding       : 8px;
			border-radius : 100%;
			transition    : .3s ease-in-out;
			cursor        : pointer;
			outline       : none;

			&:hover {
				background : #e5e5e5;
			}

			&:focus {
				box-shadow : 0 0 0 2px #bddce6;
			}

			svg {
				width : 15px;
			}
		}

	}

	.yith-wcwl-react-preview-toggle__content {
		display : none;
	}

	p.yith-wcwl-react-preview-toggle__content-text {
		font-size : .9em;
		margin    : 25px 0 10px;
	}

	.yith-wcwl-react-preview-toggle__content-buttons {
		display        : flex;
		flex-direction : column;
		text-align     : center;
		gap            : 15px;
		margin         : 30px 0 10px;

		#yith-wcwl-preview-toggle-convert-to-react {
			background      : #00779c;
			color           : white;
			border          : 1px solid #00779c;
			padding         : 0 20px;
			font-size       : 15px;
			font-weight     : bold;
			line-height     : 45px;
			border-radius   : 3px;
			outline         : none;
			transition      : .3s ease-in-out;
			text-decoration : none;

			&:hover {
				background   : #0094c4;
				border-color : #0094c4;
			}

			&:focus {
				box-shadow : 0 0 0 3px #bddce6;
			}
		}

		#yith-wcwl-preview-toggle-no-thanks {
			text-decoration : none;
			color           : #00779c;
			font-size       : 15px;
			font-weight     : 600;
			outline         : none;
			transition      : .3s ease-in-out;

			&:focus, &:hover {
				text-decoration : underline;
				color           : #135e96;
			}
		}
	}

	&.collapsed {
		.yith-wcwl-react-preview-toggle__header-toggle-button {
			transform : rotate(180deg);
		}
	}
}