.slider-nav-btn {
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	aspect-ratio: 2 / 2;
	border-radius: 50%;
	background-color: $color-orange-400;
	transform: translateY(-50%);
	z-index: 1;

	svg {
		width: 15px;
		aspect-ratio: 2 / 2;
		color: white;
	}

	&--prev {
		left: calc(-48px * 2);
	}

	&--next {
		right: calc(-48px * 2);
	}

	&:disabled {
		pointer-events: none;
		background-color: rgba($color-orange-400, 0.32);
	}

	@include tablet {
		width: 40px;

		&--prev {
			left: calc(-40px - 24px);
		}

		&--next {
			right: calc(-40px - 24px);
		}

		svg {
			width: 12.5px;
		}
	}

	@include mobile {
		width: 32px;

		&--prev {
			left: calc(-32px - 16px);
		}

		&--next {
			right: calc(-32px - 16px);
		}

		svg {
			width: 10px;
		}
	}
}