/*
 * Simple Carussell - base/engine styles.
 * These rules make sure every carousel behaves responsively, no matter
 * which custom CSS is added per-carousel in the plugin settings.
 * Do not remove the display rules, the rotation logic in js/frontend.js
 * relies on them.
 */

.simple-carussell-instance {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	position: relative;
}

/* Overlaid left/right navigation buttons, allowing visitors to manually
 * step through the elements instead of waiting for the automatic
 * rotation. Only present when a "Navigation Style" other than "Ohne"
 * is selected for the carousel. */
.simple-carussell-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	background: none;
	background-color: transparent;
	border: none;
	outline: none;
	box-shadow: none;
	margin: 0;
	padding: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.simple-carussell-nav:hover,
.simple-carussell-nav:focus,
.simple-carussell-nav:active,
.simple-carussell-nav:focus-visible {
	background: none;
	background-color: transparent;
	border: none;
	outline: none;
	box-shadow: none;
}

.simple-carussell-nav-prev {
	left: 0;
}

.simple-carussell-nav-next {
	right: 0;
}

.simple-carussell-nav svg {
	display: block;
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	fill: currentColor;
}

.simple-carussel {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	position: relative;
}

/* Elements are stacked in normal flow (not absolutely positioned) so the
 * wrapper height always fits the currently visible element - no cropping,
 * no fixed height needed. */
.simple-carussel-element {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Hidden elements (all but the active one) */
.simple-carussel-element[data-sc-hidden="true"] {
	display: none !important;
}

/* Images always scale to the full available width, keep their original
 * aspect ratio and are never cropped. */
.simple-carussel-element img {
	display: block;
	max-width: 100%;
	height: auto;
}

.simple-carussel-element.image-only img {
	margin: 0 auto;
}