:root {
	--stories-slider-z-shadows: 999;
	--stories-slider-z-pagination: 50;
	--stories-slider-z-navigation: 200;
	--stories-slider-z-user: 300;
	--stories-slider-z-actions: 300;
	--stories-slider-z-content: 100;
	--stories-slider-slide-bg-color: #000;

	--stories-slider-slide-radius: 8px;
	--stories-slider-line-color: rgba(255, 255, 255, 0.35);
	--stories-slider-line-color-active: #fff;
	--stories-slider-line-offset-center: 8px;
	--stories-slider-line-offset-top: 8px;
	--stories-slider-line-height: 2px;
	--stories-slider-line-radius: 999px;
	--stories-slider-line-gap: 2px;
}

.stories-slider {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center
}

.stories-slider>.swiper>.swiper-wrapper>.swiper-slide:not(.swiper-slide-next, .swiper-slide-prev, .swiper-slide-active) {
	opacity: 0
}

.stories-slider>.swiper>.swiper-wrapper>.swiper-slide-next+.swiper-slide {
	opacity: 1
}

.stories-slider .swiper {
	height: 100%;
	width: 100%
}

.stories-slider .swiper .swiper .swiper-slide {
	border-radius: var(--stories-slider-slide-radius);
	overflow: hidden;
	background-color: var(--stories-slider-slide-bg-color)
}

.stories-slider .swiper .swiper-slide-shadow-left,
.stories-slider .swiper .swiper-slide-shadow-right {
	z-index: var(--stories-slider-z-shadows) !important
}

.stories-slider .swiper .swiper-slide-shadow-left {
	background-image: linear-gradient(to left, #000, rgba(0, 0, 0, .5))
}

.stories-slider .swiper .swiper-slide-shadow-right {
	background-image: linear-gradient(to right, #000, rgba(0, 0, 0, .5))
}

.stories-slider.stories-slider-perspective .swiper .swiper,
.stories-slider.stories-slider-perspective .swiper-slide-shadow-left,
.stories-slider.stories-slider-perspective .swiper-slide-shadow-right {
	transform: translate3d(0, 0, calc(-1 * var(--swiper-cube-translate-z)));
	transform-origin: 0% 0% calc(-1 * var(--swiper-cube-translate-z))
}

.stories-slider-button {
	position: absolute;
	z-index: var(--stories-slider-z-navigation);
	top: 0;
	height: 100%;
	user-select: none;
	-webkit-user-select: none
}

.stories-slider-button::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition-duration: .2s
}

.stories-slider-button:active::before {
	opacity: .25
}

.stories-slider-button-prev {
	left: 0;
	width: 30%
}

.stories-slider-button-prev::before {
	background-image: linear-gradient(to right, #000, rgba(0, 0, 0, 0))
}

.stories-slider-button-next {
	right: 0;
	width: 70%
}

.stories-slider-button-next::before {
	background-image: linear-gradient(to left, #000, rgba(0, 0, 0, 0))
}

.stories-slider-pagination {
	position: absolute;
	left: var(--stories-slider-line-offset-center);
	right: var(--stories-slider-line-offset-center);
	top: var(--stories-slider-line-offset-top);
	display: flex;
	justify-content: space-between;
	z-index: var(--stories-slider-z-pagination);
	pointer-events: none;
	transform: translate3d(0, 0, 0)
}

.stories-slider-pagination-bullet {
	width: 100%;
	flex-shrink: 10;
	border-radius: var(--stories-slider-line-radius);
	height: var(--stories-slider-line-height);
	background: var(--stories-slider-line-color);
	position: relative;
	overflow: hidden;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, .35)
}

.stories-slider-pagination-bullet span {
	position: absolute;
	background: var(--stories-slider-line-color-active);
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: var(--stories-slider-line-radius);
	transform: translateX(-100%);
	transition-timing-function: linear
}

.stories-slider-pagination-bullet-viewed span {
	transform: translateX(0%);
	transition-duration: 0s !important
}

.stories-slider-pagination-bullet+.stories-slider-pagination-bullet {
	margin-left: var(--stories-slider-line-gap)
}

.stories-slider-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: absolute;
	right: 10px;
	top: 18px;
	height: 32px;
	z-index: var(--stories-slider-z-actions);
	transition-duration: .2s;
	user-select: none;
	-webkit-user-select: none
}

.stories-slider-close-button {
	margin-left: 18px;
	width: 22px;
	height: 22px;
	appearance: none;
	border: none;
	outline: 0;
	box-shadow: none;
	display: block;
	position: relative;
	cursor: pointer;
	padding: 0;
	background: 0 0;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	-webkit-user-select: none
}

.stories-slider-close-button::after,
.stories-slider-close-button::before {
	content: "";
	width: 125%;
	height: 2px;
	background: #fff;
	border-radius: 999px;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	box-shadow: 0px 0px 1px rgba(0, 0, 0, .35)
}

.stories-slider-close-button::before {
	transform: translate(-50%, -50%) rotate(45deg)
}

.stories-slider-close-button::after {
	transform: translate(-50%, -50%) rotate(-45deg)
}

.stories-slider-close-button:active {
	opacity: .55
}

.stories-slider-content {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: var(--stories-slider-z-content);
	display: flex;
	align-items: center;
	justify-content: center;
	user-select: none;
	-webkit-user-select: none
}

.stories-slider-content>img,
.stories-slider-content>video {
	width: 100%;
	height: 100%;
	object-position: center;
	display: block;
	border: none;
	outline: 0;
	background: 0 0;
	background-color: transparent
}

.stories-slider-content>img {
	object-fit: cover
}

.stories-slider-content>video {
	object-fit: contain
}