.xt_woovs-on-demand {

	background: #ffffff;
	max-width: 100vw;
	max-height: 100vh;
	overflow: hidden;

	.xt_woovs-on-demand-wrap{
		overflow: auto;
		max-width: 100vw;
		max-height: calc(100vh - 45px);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20px 15px;
	}

	&.xt_woovs-display-inline {
		position: absolute;
		width:100%;
		margin-top:10px;
		border-radius: 3px;
		z-index: 1000;
		opacity: 0;
		visibility: hidden;

		.button{
			width: 100%!important;
			margin: 10px 0 0!important;
		}

		&.xt_woovs-active{
			visibility: visible;
			opacity: 1;
		}

	}

	&.xt_woovs-display-modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: scale(0) translateX(-50%) translateY(-50%);
		transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s 0.1s;
		transform-origin: left center;
		z-index: 999999;
		opacity: 0;
		visibility: hidden;
		border-radius: 3px;
		box-shadow: 0 0 5px rgba(24,24,24,0.2);

		&.xt_woovs-active {
			opacity: 1;
			visibility: visible;
			transform: scale(1) translateX(-50%) translateY(-50%);
		}

		.xt_woovs-on-demand-wrap{
			width: 60vw;
			min-width: 400px;
		}
	}

	&.xt_woovs-display-drawer {
		position: fixed;
		max-height: 100vh;
		transform-origin: center center;
		transition: transform 0.3s ease, visibility 0.3s 0.1s;
		z-index: 999999;

		&.xt_woovs-drawer-bottom{
			bottom: 0;
			transform: translateX(-50%) translateY(100%);
		}

		&.xt_woovs-drawer-top{
			top: 0;
			transform: translateX(-50%) translateY(-100%);
		}

		&.xt_woovs-drawer-bottom,
		&.xt_woovs-drawer-top {
			left: 50%;

			&.xt_woovs-active {
				transform: translateX(-50%) translateY(0);
			}
		}

		&.xt_woovs-drawer-left{
			left: 0;
			transform: translateX(-100%) translateY(-50%);
		}

		&.xt_woovs-drawer-right{
			right: 0;
			transform: translateX(100%) translateY(-50%);
		}

		&.xt_woovs-drawer-left,
		&.xt_woovs-drawer-right {
			top: 50%;

			&.xt_woovs-active {
				transform: translateX(0) translateY(-50%);
			}
		}

		.xt_woovs-on-demand-wrap{
			width: 60vw;
			min-width: 400px;
		}
	}

	/* header */
	> span{
		display: block;
		font-weight: 600;
		padding: 15px;
		border-bottom: 1px solid #eaeaea;
		text-align: center;
		font-size: 14px;
		background: #eaeaea;
		color: #333;

		/* header close button */
		> span {
			display: inline-block;
			float: right;
			cursor: pointer;
		}
	}

	.variations_form{
		margin:0;

		.variations{
			margin: 0!important;
			padding: 0!important;
		}
	}

	.xt_woovs-swatches-wrap{
		margin-bottom: 10px;
	}

	.button{
		font-size: 12px !important;
		position: relative!important;
		left: initial!important;
		right: initial!important;
		max-width: initial!important;
		height: auto;
		padding: 0 10px!important;
		margin-bottom: 5px !important;
		line-height: 40px!important;
		text-align: center!important;

		&:before,
		&:after{
			display:none!important;
			content:''!important;
		}

		&:last-child{
			margin-bottom: 0 !important;
		}
	}
}

.xt_woovs-display-backlayer {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	background: rgba(24,24,24,0.5);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease 0.15s, visibility 0.3s 0.15s;
	z-index: 9998;

	&.xt_woovs-active{
		visibility: visible;
		opacity: 1;
		transition: opacity 0.3s ease;
	}
}

.xt_woovs_select_options_button {

	&.xt_woovs-display-inline.xt_woovs-visibility-always {
		display: none !important;
	}

	&.xt_woovs-display-inline.xt_woovs-visibility-hover,
	&.xt_woovs-display-inline.xt_woovs-visibility-click{

		&.xt_woovs-active {
			display: none!important;
		}
	}
}

.xt_woovs-on-demand-preview{

	margin-top: -5px;
	width: 100%;
	overflow: hidden;
	transition: flex 0.3s ease, width 0.3s ease, height 0.3s ease, min-height 0.3s ease, opacity 0.2s ease;
	will-change: width, height, min-height, flex;
	flex: 1 0 45%;

	&:empty{
		width:0;
		flex:0;
	}

	img {
		padding: 0 20px 0 0;
		width: 100%;
		box-shadow: inherit!important;
	}

	+ .variations_form{
		flex: 1 0 55%;
	}

}

@media only screen and (max-width:400px) {

	.xt_woovs-on-demand {

		.xt_woovs-on-demand-wrap {
			flex-direction: column;
			justify-content: start;
		}


		&.xt_woovs-display-modal,
		&.xt_woovs-display-drawer{

			border-radius: 0!important;

			.xt_woovs-on-demand-wrap{
				width: 100vw!important;
				min-width: 100vw!important;
				min-height: calc(100vh - 45px)!important;
			}
		}


		.xt_woovs-on-demand-preview {
			flex: 1 0 100%;
			margin-bottom: 20px;
			padding: 0;
			overflow: initial;
			opacity: 1;

			&:empty {
				width: inherit;
				min-width: inherit;
				height: 0;
				min-height: 0;
				opacity: 0;
			}

			img {
				margin: 0 auto;
				display: block;
				padding: 0;
			}

		}

		.variations_form {
			flex: 1 0 100%;
		}
	}
}

