/* =============================================================================
- Swiper Arrows
============================================================================= */
.gwel-swiper {
	.gwel-swiper-inner {
		position: relative;
	}
	.gwel-navigation-arrows {
		display: flex;
		justify-content: var(--arrows--horizontal-position);
		gap: var(--arrows--gap, 10px);
		.gwel-button {
			cursor: pointer;
			color: var(--arrows-icon-c, #b8b8b8);
			font-size: var(--arrows-icon-size, 24px);
			padding: var(--arrows-icon-padding, 0.5em);
			text-align: center;
			line-height: 1;
			position: relative;
			transition: color .3s ease, background-color .3s ease, border-color .3s ease;
			i {
				font-size: 1em;
				width: 1em;
				height: 1em;
			}
			svg {
				display: block;
				width: 1em;
				height: auto;
				max-height: 1em;
				fill: currentColor;
				g,
				path {
					fill: inherit;
				}
			}
			&.gwel-icon-view-stacked {
				color: var(--arrows-icon-c, #ffffff);
				background-color: var(--arrows-icon-background-c, #000000);
				border-radius: var(--arrows-icon-border-r, 100%);
			}
			&.gwel-icon-view-framed {
				color: var(--arrows-icon-c, #b8b8b8);
				border: var(--arrows-icon-border-w, 3px) solid var(--arrows-icon-border-c, #b8b8b8);
				background-color: var(--arrows-icon-background-c, transparent);
				border-radius: var(--arrows-icon-border-r, 100%);
			}
		}
	}
	&.gwel-arrows-position-middle .gwel-swiper-inner {
		display: block;
		.gwel-navigation-arrows {
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			pointer-events: none;
			z-index: 3;
			justify-content: space-between;
			transform: translateY(-50%);
			.gwel-button {
				pointer-events: visible;
				transform: translateY(var(--arrows--vertical-adjustment,0));
				&.gwel-button-prev {
					margin-left: var(--arrows--horizontal-adjustment, 0);
				}
				&.gwel-button-next {
					margin-right: var(--arrows--horizontal-adjustment, 0);
				}
			}
		}
	}
	// Vertical Offset
	&.gwel-arrows-position-top .gwel-navigation-arrows {
		margin-bottom: var(--arrows--vertical-offset, 30px);
	}
	&.gwel-arrows-position-bottom .gwel-navigation-arrows {
		margin-top: var(--arrows--vertical-offset, 30px);
	}

	// Self Aligns
	&.gwel-arrows-align-left .gwel-navigation-arrows {
		align-self: flex-start;
	}
	&.gwel-arrows-align-center .gwel-navigation-arrows {
		align-self: center;
	}
	&.gwel-arrows-align-right .gwel-navigation-arrows {
		align-self: flex-end;
	}
}

/* =============================================================================
- Swiper Pagination
============================================================================= */
.gwel-swiper {
	.gwel-pagination {
		position: relative;
		margin-top: var(--pagination--offset,30px);
		z-index: 10;
		pointer-events: none;
		&.swiper-pagination-bullets {
			display: flex;
			gap: var(--bullet-gap);
			justify-content: var(--pagination--horizontal-position);
			.gwel-bullet {
				pointer-events: visible;
				width: var(--bullet-w,12px);
				height: var(--bullet-h,12px);
				background-color: var(--bullet-background-c);
				border-radius: var(--bullet-border-r);
				border: var(--bullet-border-w,0) solid var(--bullet-border-c);
				cursor: pointer;
				transition: background-color .3s ease, border-color .3s ease;
			}
		}
		&.swiper-pagination-progressbar {
			background-color: var(--progressbar-background-c);
			height: var(--progressbar-h, 6px);
			.swiper-pagination-progressbar-fill {
				background-color: var(--progressbar-active-c);
			}
		}
	}
}

/* =============================================================================
- General Carousel
============================================================================= */
.gwel-swiper {
	&.gwel-expan-right .gwel-swiper-carousel {
		margin-right: calc(-1*(100vw - var(--content-width))/2);
		padding-right: calc((100vw - var(--content-width))/2);
	}
	&.gwel-expan-left .gwel-swiper-carousel {
		margin-left: calc(-1*(100vw - var(--content-width))/2);
		padding-left: calc((100vw - var(--content-width))/2);
	}
	&.gwel-expan-both .gwel-swiper-carousel {
		margin-right: calc(-1*(100vw - var(--content-width))/2);
		margin-left: calc(-1*(100vw - var(--content-width))/2);
		padding-left: calc((100vw - var(--content-width))/2);
		padding-right: calc((100vw - var(--content-width))/2);
	}
	.gwel-carousel {
		align-items: var(--carousel--vertical-align);
	}
}