/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

@use "swiper/css/bundle";

.wp-block-blablablocks-slider {
	position: relative;
	box-sizing: border-box;
	contain: inline-size;
}

// Navigation Position
.bbb-slider-nav-position-top-left .bbb-slider-nav-container {
	top: 0;
	left: 0;
	justify-content: flex-start;
}

.bbb-slider-nav-position-bottom-left .bbb-slider-nav-container {
	top: auto;
	bottom: 0;
	left: 0;
	justify-content: flex-start;
}

.bbb-slider-nav-position-top-right .bbb-slider-nav-container {
	top: 0;
	right: 0;
	justify-content: flex-end;
}

.bbb-slider-nav-position-bottom-right .bbb-slider-nav-container {
	top: auto;
	bottom: 0;
	right: 0;
	justify-content: flex-end;
}

.bbb-slider-nav-position-top-center .bbb-slider-nav-container {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	justify-content: center;
}

.bbb-slider-nav-position-bottom-center .bbb-slider-nav-container {
	top: auto;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	justify-content: center;
}

.bbb-slider-nav-position-center .bbb-slider-nav-container,
.bbb-slider-nav-position-center-center .bbb-slider-nav-container {
	width: 100% !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) !important;
	justify-content: space-between;
	margin-left: 0 !important;
	margin-right: 0 !important;
}


.bbb-slider-nav-position-center .bbb-slider-nav-container .swiper-button-prev,
.bbb-slider-nav-position-center-center .bbb-slider-nav-container .swiper-button-prev {
	margin-left: var(--navigation-offset-left) !important;
	position: absolute !important;
	left: 0 !important;
	top: 50% !important;
	transform: translateY(-50%);
}

.bbb-slider-nav-position-center .bbb-slider-nav-container .swiper-button-next,
.bbb-slider-nav-position-center-center .bbb-slider-nav-container .swiper-button-next {
	margin-right: var(--navigation-offset-right) !important;
	position: absolute !important;
	right: 0 !important;
	left: auto !important;
	top: 50% !important;
	transform: translateY(-50%);
}

// Pagination Position
.bbb-slider-pag-position-top-left .swiper-pagination {
	top: 0;
	justify-content: flex-start;
}

.bbb-slider-pag-position-bottom-left .swiper-pagination {
	top: auto;
	bottom: 0;
	justify-content: flex-start;
}

.bbb-slider-pag-position-top-right .swiper-pagination {
	top: 0;
	justify-content: flex-end;
}

.bbb-slider-pag-position-bottom-right .swiper-pagination {
	top: auto;
	bottom: 0;
	justify-content: flex-end;
}

.bbb-slider-pag-position-top-center .swiper-pagination {
	top: 0;
	justify-content: center;
}

.bbb-slider-pag-position-bottom-center .swiper-pagination {
	top: auto;
	bottom: 0;
	justify-content: center;
}

.wp-block-blablablocks-slider .swiper {
	position: initial;

	.swiper-wrapper {
		gap: 0;
		z-index: 100;
	}

	.bbb-slider-nav-container {
		display: flex;
		align-items: center;
		width: max-content;
		gap: var(--navigation-spacing);
		position: absolute;
		margin-top: var(--navigation-offset-top);
		margin-bottom: var(--navigation-offset-bottom);
		margin-left: var(--navigation-offset-left);
		margin-right: var(--navigation-offset-right);
		z-index: 10000;
	}

	.swiper-button-prev,
	.swiper-button-next {
		position: relative;
		left: 0;
		right: 0;
		margin: 0;
		top: 0;
		color: var(--navigation-arrow-color, var(--swiper-theme-color));
		background-color: var(--navigation-background-color);
		border-radius: var(--navigation-border-radius);
		padding: var(--navigation-padding-top) var(--navigation-padding-right) var(--navigation-padding-bottom) var(--navigation-padding-left);

		&:hover {
			color: var(--navigation-arrow-hover-color, var(--swiper-theme-color));
			background-color: var(--navigation-background-hover-color);
		}
	}

	.swiper-pagination {
		margin-top: var(--pagination-offset-top);
		margin-right: var(--pagination-offset-right);
		margin-bottom: var(--pagination-offset-bottom);
		margin-left: var(--pagination-offset-left);
		display: flex;
		z-index: 10000;
	}

	.swiper-pagination-bullet {
		width: var(--pagination-size);
		height: var(--pagination-size);
		background: var(--pagination-inactive-color, #000);
	}

	.swiper-pagination-bullet:focus {
		outline: none;
	}

	.swiper-pagination-bullet-active {
		background: var(--pagination-active-color, var(--swiper-theme-color)) !important;
	}
}