/**
 * Users: аватар class="avatar" как Siena + блок настроек со стрелкой.
 */

/* Базовый аватар (img из files_user_avatar) */
img.avatar {
	display: inline-block;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border-radius: 4px;
	object-fit: cover;
}

/* Публичный профиль — маленький */
.horizon-users--details .avatar,
.horizon-users__avatar--sm .avatar {
	width: 72px;
	height: 72px;
}

/* Настройки — фото по центру, под ним текст и ссылка */
.horizon-users__avatar-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.horizon-users__avatar-box {
	display: flex;
	justify-content: center;
	width: 100%;
}

.horizon-users__avatar-panel .file-upload-avatar {
	flex: 0 0 auto;
}

/* Input поверх фото — клик по аватару (Siena input-ava) */
.file-upload-avatar .files-avatar-pick {
	position: relative;
	display: inline-block;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	overflow: visible;
	cursor: pointer;
	line-height: 0;
	vertical-align: top;
}

.file-upload-avatar .file-upload-avatar-input {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
	font-size: 0;
	transform: none;
}

.horizon-users__avatar-panel .files-avatar .avatar,
.horizon-users__avatar-panel .files-avatar img.avatar {
	width: 160px;
	height: 160px;
	border-radius: 4px;
	pointer-events: none;
}

.horizon-users__avatar-hint {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 22rem;
	width: 100%;
}

/* Подсказка как Siena text-muted fs-13 */
.horizon-users__avatar-hint-text {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--ccc-text-muted);
	text-align: center;
}

.horizon-users__avatar-link {
	display: inline-block;
	margin-top: 0.35rem;
	text-decoration: underline;
	color: var(--ccc-text);
	font-weight: 400;
}

.horizon-users__avatar-link:hover {
	color: var(--ccc-action);
}

/* PFS: заголовок «фото профиля» + Make avatar */
.files-myavatars {
	scroll-margin-top: 3rem;
	padding-top: 0.25rem;
}

.files-myavatars__title {
	margin: 1.25rem 0 0.75rem;
	text-align: center;
	font-size: 1rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ccc-text);
}

.files-preview--avatar-off {
	opacity: 0.55;
}

.files-preview--avatar-on {
	opacity: 1;
}

.files-ava-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
}

.files-makenewava,
.files-currentava {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ccc-text);
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.2;
	cursor: pointer;
	vertical-align: middle;
}

.files-currentava {
	color: var(--ccc-action);
	font-weight: 400;
	cursor: default;
}

.files-makenewava:hover {
	color: var(--ccc-action);
}

/* Stack в Make avatar — как delete: 1x по центру (left: 0) */
.file-upload .files-makenewava .files-la-stack,
.file-upload .files-currentava .files-la-stack {
	display: inline-block;
	position: relative;
	width: 2em;
	height: 2em;
	line-height: 2em;
	vertical-align: middle;
	flex: 0 0 auto;
}

.file-upload .files-makenewava .files-la-stack .la-stack-1x,
.file-upload .files-currentava .files-la-stack .la-stack-1x {
	font-size: 1em;
	line-height: 2em;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
}

.files-makenewava__label {
	display: none;
}

@media (min-width: 640px) {
	.files-makenewava__label {
		display: inline;
	}
}