.csblo-slides-component-popover-content .components-popover__content {
	min-width: 280px;
}
.csblo-slides-component-boxed-tab-panel {

	.components-tab-panel__tabs {
		border: 1px solid #e0e0e0;
	}
	.components-tab-panel__tabs-item {
		height: 36px;
		width: 100%;
		justify-content: center;
	}

	.components-tab-panel__tabs-item.active-tab {
		background: rgb(30, 30, 30);
		color: rgb(255, 255, 255);
	}

	.components-tab-panel__tab-content {
		padding: 10px 5px;
		border: 1px solid #e0e0e0;
		margin-block-start: -1px;
		display: flex;
		flex-direction: column;
	}
}

.csblo-label-with-icon {
	display: flex;
	align-items: center;
	gap: 5px;

	.csblo-label-with-icon-label {
		flex-grow: 1;
	}

	.csblo-label-with-icon-icon {
		display: flex;
	}

	.csblo-label-with-icon-label-toggle-button {
		padding: 0;
		min-width: 20px;
		height: 20px;
	}

	svg {
		width: 20px;
		height: 20px;
	}
}

// Easing Cubic Bezier custom control.
.csblo-custom-easing-cubic-bezier-control-dropdown {
	border: 1px solid #ddd;
	border-radius: 2px;
	width: 100%;

	.csblo-custom-easing-cubic-bezier-control-dropdown-toggle {
		width: 100%;
		justify-content: center;
	}
}
.csblo-custom-easing-cubic-bezier-control-dropdown-bezier > .components-base-control__field {

	.components-number-control:not(:last-child) .components-input-base {
		margin-right: -1px;
		border-right: 0;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
}
.csblo-custom-easing-cubic-bezier-control-dropdown-bezier-editor {
	display: flex;
	justify-content: center;
	border: 1px solid var(--wp-components-color-gray-600, #949494);
	border-radius: 2px;

	.is-thumbnail {
		border-color: #111;
	}
}

// Static source editor layout (no preview)
.csblo-slides-editor-inner {
	position: relative;
	display: flex;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	gap: var(--csblo--slides-editor--gap, 20px);
	height: var(--csblo--slides-editor--height, 400px);

	> .wp-block-csblo-slide {
		scroll-snap-align: start;
		flex-shrink: 0;

		// Calculate slide width by:
		// 1. Removing all gap space from the total width
		// 2. Then dividing remaining space by number of slides
		flex-basis: calc((100% - (var(--csblo--slides-editor--slides-per-view, 1) - 1) * var(--csblo--slides-editor--gap, 20px)) / var(--csblo--slides-editor--slides-per-view, 1));
		width: calc((100% - (var(--csblo--slides-editor--slides-per-view, 1) - 1) * var(--csblo--slides-editor--gap, 20px)) / var(--csblo--slides-editor--slides-per-view, 1));
	}

}

.csblo-slides-editor {

	// Needed to prevent the background media from covering any padding applied to parent
	.csblo-slides__image-background,
	.csblo-slides__video-background {
		padding: inherit;
	}

	&.is-auto-height:not(.is-slide-direction-vertical) {

		.csblo-slides-editor-inner {
			height: auto;
		}
	}
}

.wp-block-csblo-slides {

	&.no-navigation-editor {

		.wp-block-csblo-slides__prev,
		.wp-block-csblo-slides__next {
			background-color: rgba(90, 90, 90, 0.15);
			color: var(--wp-admin-theme-color, #111);
			font-size: 2em;
			border-radius: 0;
			backdrop-filter: none;
		}
	}
}