// Swiper CSS is imported via JavaScript in app.js
// This file contains only custom styling for Swiper components

// Custom styling for Swiper pagination to match the previous Splide styling
.swiper-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	bottom: -5px;

	&:before, &:after {
		display: none;
	}

	.swiper-pagination-bullet {
		width: 35px;
		height: 35px;
		border-radius: 0;
		background: transparent !important;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: none;
		transition: none;
		opacity: 1;
		margin: 0;

		&:before {
			content: "";
			width: 100%;
			height: 6.8px;
			border: 0.861px solid @dark_primary;
			background: var(--dark_primary);
			display: block;
			border-radius: 30.139px;
			transition: background 200ms;

			.swiperWhiteButtons & {
				border: 0.861px solid #fff;
				background: #fff;
			}
		}

		&.swiper-pagination-bullet-active {
			transform: none;
			transition: none;
			opacity: 1;

			&:before {
				background: transparent;
				transition: background 200ms, opacity 200ms;
			}
		}

		&:hover, &:active, &:focus-visible {
			&:before {
				opacity: 0.8;
			}
		}
	}
}

// Custom styling for Swiper navigation
.swiper-button-next,
.swiper-button-prev {
	&:after {
		font-size: 24px;
		color: @dark_primary;
	}

	.swiperWhiteButtons &:after {
		color: #fff;
	}
}

// Additional styling for Swiper container
.swiper-container {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	list-style: none;
	padding: 0;
	z-index: 1;
}