:root {
	--main-color: #FF7E04;
}

@keyframes load {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.storiesListItem.swiper-slide {
	padding: 0 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 11px;
	width: min-content;
	cursor: pointer;
}

/*.storiesListItem.swiper-slide._watched {
	order: 1;
}*/

.storiesListItem__img {
	width: 105px;
	height: 105px;
	border-radius: 50%;
	position: relative;
	padding: 4px;
}

.storiesListItem__img::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	padding: 2px;
	background: var(--main-color);

	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: destination-out;
	mask-composite: exclude;
}

._watched .storiesListItem__img::before {
	background: lightgray;
}

._load .storiesListItem__img::before {
	animation: load 1.5s infinite linear;
	background: conic-gradient(from 90deg at 50% 50%, rgba(0, 123, 198, 0) 0deg, var(--main-color) 270deg, var(--main-color) 360deg);
}

.storiesListItem__img img {
	border-radius: 50%;
}


.storiesListItem__name {
	font-size: 13px;
	font-weight: 400;
	line-height: 18.2px;
	text-align: center;
	min-width:135px;
}

.storiesDetail {
	--stories-slider-slide-radius: 0;
	--stories-slider-line-color: #fff;
	--stories-slider-line-color-active: var(--main-color);
	--stories-slider-line-offset-center: 15px;
	--stories-slider-line-offset-top: 10px;
	--stories-slider-line-height: 5px;
	--stories-slider-line-radius: 100px;
	--stories-slider-line-gap: 6px;

	opacity: 0;

	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;

	max-width: 375px;
	width: calc(100% - 20px);
	aspect-ratio: 375 / 666;
}

.storiesDetail .stories-slider-actions {
	right: 15px;
	top: 20px;
}

.storiesDetail .stories-slider-close-button {
	/* display: none; */
}

.storiesDetail.stories-slider-in {
	opacity: 1;
	z-index: 400;
}

body:has(.storiesDetail.stories-slider-in) .form-bg {
	z-index: 399;
}