/* version 6.3 */
/* .slides-tape : removed { width: 100%; height: 100%; align-items: center; } */
/* .slide: removed { height: 100%; } */
/* .fade-transition .slide: removed { width: 100%; } */
.slider-wrapper {
	--commands-clr: white;
	--commands-shadow: 0 0 5px #0007;
	--slide-width: 100%;
	--previous-btn-content: "\2039";
	--next-btn-content: "\203A";
	--dot-content: "\25cb"; /* empty circle */
	--dot-content-active: "\25cf"; /* filled circle */
	overflow-x: hidden; position: relative; /* do not add inline padding (block padding is okay) */
}

.slides-tape {display: flex; isolation: isolate;} /* do not add padding */
.animated {transition: all var(--animation-duration) ease-in-out; } /* applied by JS to the slides-tape */

.slide {flex: 0 0 var(--slide-width); transition: inherit; } /* you can add padding */
.fade-transition .slide { position: absolute; }
.fade-transition .slide:not(:first-child){ opacity: 0; }

.slider-button {
	position: absolute; top: 50%; transform: translateY(-50%); /* Position */
	cursor: pointer; font-size: 4rem; padding: 0 .25em;
	color: var(--commands-clr); text-shadow: var(--commands-shadow);

	&.previous {left: 0;}
	&.previous::before {content: var(--previous-btn-content);}
	&.next {right: 0;}
	&.next::before {content: var(--next-btn-content);}
}

.slide-dot-line {
	position: absolute; left: 50%; transform: translateX(-50%); display: flex; bottom: 0;  /* Position */
	gap: .5em; padding: .5em; line-height: 1em; color: var(--commands-clr); text-shadow: var(--commands-shadow);

	& > div {cursor: pointer; transition-duration: var(--animation-duration);}
	& > div::before {content: var(--dot-content);}
	& > div.active::before {content: var(--dot-content-active);}
}

.slide-number-wrapper {
	position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
	padding: .5em; line-height: 1em; color: var(--commands-clr); text-shadow: var(--commands-shadow); font-size: 1.5em;
}