.bc-shortcode-ui__overlay {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 100vw;
	background: var(--color-black-a-70);
}

.bc-shortcode-ui__wrapper {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	width: 100vw;
	z-index: 159000;

	&[aria-hidden='true'] {
		display: none;
	}
}

.bc-shortcode-ui__close-button {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 25px;
	background-color: transparent;
	border: 0;
	padding: 8px;
	z-index: 20;
	cursor: pointer;
	opacity: 0.6;
	transition: var(--transition-opacity);

	&:hover,
	&:focus {
		opacity: 1;
	}
}

.bc-shortcode-ui__content {
	background: var(--color-off-white);
	z-index: 159901;
	position: absolute;
	width: 90%;
	height: 90%;
	left: 5%;
	top: 5%;
	overflow-y: scroll;
	font-size: var(--font-size-base);

	> div {
		height: 100%;
	}

	* {
		box-sizing: border-box;
	}

	@media (--viewport-full) {
		overflow: hidden;
	}
}

.bc-shortcode-ui {
	height: 100%;

	@media (--viewport-full) {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}
}

.bc-shortcode-ui__selectors {
	flex: 1;
	width: 100%;
	height: auto;
	border-bottom: 1px solid #ccc;
	padding: 30px;
	overflow-y: scroll;

	@media (--viewport-full) {
		flex: 0 1 250px;
		height: 100%;
		border-bottom: 0;
		border-right: 1px solid #ccc;
	}
}

.bc-shortcode-ui__products-wrapper {
	width: 100%;
	height: 100%;

	@media (--viewport-full) {
		flex: 1 1 auto;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}
}

.bc-shortcode-ui__products {
	position: relative;

	@media (--viewport-full) {
		flex: 0 1 60%;
		height: 100%;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
	}

	@media (--viewport-large) {
		flex: 0 1 70%;
	}
}

.bc-shortcode-ui__search {
	padding: 40px 30px;
}

.bc-shortcode-ui__product-grid {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: 100%;
	padding: 10px 20px;
}

/* Shortcode UI Settings Sidebar */
.bc-shortcode-ui__settings {
	height: 100%;
	border-top: 1px solid #ccc;
	background: var(--color-white);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;

	@media (--viewport-full) {
		height: 100%;
		flex: 0 1 40%;
		border-top: 0;
		border-left: 1px solid #ccc;
	}

	@media (--viewport-large) {
		flex: 0 1 30%;
	}
}

.bc-shortcode-ui__settings-header {
	position: relative;
	flex: 0 0 120px;
	overflow: hidden;

	@media (--viewport-small) {
		flex: 0 0 90px;
	}

	@media (--viewport-full) {
		flex: 0 0 164px;
	}

	@media (--viewport-xxlarge) {
		flex: 0 0 130px;
	}
}

.bc-shortcode-ui__dynamic-listing-header,
.bc-shortcode-ui__manual-listing-header,
.bc-shortcode-ui__default-header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	overflow: hidden;
	opacity: 0;
	z-index: -1;
	transition: var(--transition);
	padding: 20px;

	@media (--viewport-large) {
		padding: 30px;
	}

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

.bc-shortcode-ui__default-header p {
	font-size: var(--font-size-content-s);
}

.bc-shortcode-ui__settings-title {
	margin-top: 0;
	margin-bottom: 0;
}

.bc-shortcode-ui__selections {
	position: relative;
	overflow: hidden;
	flex: 0 1 40%;
	border-top: 1px solid #ccc;
}

.bc-shortcode-ui__overflow-mask {
	position: absolute;
	height: 65px;
	left: 0;
	bottom: 0;
	width: 100%;
	background: linear-gradient(180deg, transparent 30%, rgba(255, 255, 255, 0.82) 70%);
	pointer-events: none;

	@media (--viewport-large) {
		height: 80px;
	}
}

.bc-shortcode-ui__selected-terms,
.bc-shortcode-ui__selected-products {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	z-index: -1;
	transition: var(--transition);

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

.bc-shortcode-ui__products-list,
.bc-shortcode-ui__terms-list {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	height: 300px;
	margin: 0;
	padding: 20px;

	@media (--viewport-large) {
		height: 100%;
		padding: 30px;
	}
}

.bc-shortcode-ui__products-list {
	height: 100%;
}

.bc-shortcode-ui__terms-list-item {
	display: inline-block;
	vertical-align: middle;
	border-radius: 4px;
	padding: 4px 2px 4px 10px;
	font-size: var(--font-size-content-xs);
	line-height: 1.67;
	font-weight: 500;
	margin-right: 4px;
	margin-bottom: 4px;
	background-color: transparent;
	border: 1px solid var(--color-bc-blue-light);
	color: var(--color-bc-black);
	word-break: break-all;

	button {
		position: relative;
		background-color: transparent;
		border: 0;
		display: inline-block;
		vertical-align: middle;
		line-height: 20px;
		opacity: 0.75;
		padding: 2px 6px;
		color: var(--color-bc-blue-light);
		cursor: pointer;
		transition: var(--transition);

		&:hover,
		&:focus {
			opacity: 1;
		}

		i {
			font-size: 20px;
		}
	}
}

.bc-shortcode-ui__terms-list-term {
	vertical-align: middle;
}

.bc-shortcode-ui__actions {
	width: 100%;
	height: auto;
	padding: 20px;
	border-top: 1px solid #ccc;
	flex: 0 1 40%;

	@media (--viewport-large) {
		padding: 30px;
	}

	.button {
		display: block;
		margin: 30px auto 0;
	}
}

.bc-shortcode-ui__display-settings {
	font-size: var(--font-size-content-s);

	& > * {
		display: block;
		margin-top: 20px;
	}

	.bc-shortcode-ui__field-label {
		display: block;
		margin-bottom: 4px;
	}

	input[type="radio"] {
		display: inline-block;
	}

	.bc-shortcode-ui__product-order,
	.bc-shortcode-ui__product-orderby {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.bc-shortcode-ui__field-label {
			flex: 0 0 100%;
		}

		label {
			flex: 0 0 50%;

			.bc-shortcode-ui__field-label {
				display: inline-block;
				margin-bottom: 0;
			}
		}
	}
}

.bc-shortcode-ui__posts-per-page--control {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}

.bc-shortcode-ui__posts-per-page-icon {
	flex: 0 0 auto;
	margin-right: 8px;
}

.bc-shortcode-ui__posts-per-page {
	flex: 0 1 140px;
	margin-right: 8px;
	width: 100%;
	cursor: pointer;
}

.bc-shortcode-ui__posts-per-page-value {
	flex: 0 0 44px;
	padding: 4px;
	margin-right: 4px;
	border: 1px solid #ccc;
	text-align: center;
}

.bc-shortcode-ui__posts-per-page-reset {
	flex: 0 0 44px;
	cursor: pointer;
	border: 0;
	color: var(--color-bc-doger-blue);

	&:hover,
	&:focus {
		color: darken(var(--color-bc-doger-blue), 0.4);
	}
}