.swiper-button-prev, .swiper-button-next
{
	background-color: var(--color-offwhite);
	border-radius: 100%;
	padding: 5px;
	height: 50px;
	width: 50px;
	&:after
	{
		font-size: 1.6rem;
	}
}

.swiper-button-prev
{
	left: 0;
	transform: translateX(-100%);
	transition: var(--transition);
}
.swiper-button-next
{
	right: 0;
	transform: translateX(100%);
	transition: var(--transition);
}

.swiper:hover
{
	.swiper-pagination
	{
		transform: translateY(0);
	}
	.swiper-button-prev
	{
		transform: translateX(24px);
	}
	.swiper-button-next
	{
		transform: translateX(-24px);
	}
}
.swiper-pagination
{
	bottom: 10px;
	transform: translateY(calc(100% + 10px));
	transition: var(--transition);
	.swiper-pagination-bullet
	{
		background: unset;
		border-radius: unset;
		overflow: hidden;
		position: relative;
		height: 40px;
		width: 10px;
		.number
		{
			color: var(--color-btn);
			display: block;
			font-size: 3rem;
			font-weight: 900;
			line-height: 1;
			opacity: 0;
			transform: translateY(3px);
			visibility: hidden;
		}
		&::before
		{
			background-color: var(--color-btn);
			content:"";
			position: absolute;
				bottom: 0;
				left: 0;
			transition: var(--transition);
			height: 10px;
			width: 10px;
		}
		&.swiper-pagination-bullet-active
		{
			width: 40px;
			&::before
			{
				width: inherit;
			}
			.number
			{
				display: block;
				opacity: 1;
				transform: translateY(0);
				transition: var(--transition);
				visibility: visible;
			}
		}
	}
}

/**
 *
 *  Additional CSS for specific slider parameter
 * 
 */

.swiper
{
	height: min-content;
	.swiper-wrapper
	{
		.swiper-slide
		{
			/* 'slidesPerView' => 'auto' */
			&.auto
			{
			 /*width: auto;*/
			}
		}

	}
}