/*
 * Molduras de avatar por perfil — Luxofans.
 *
 * A arte mede 138% da caixa do avatar. Como a abertura dos PNGs ocupa cerca de 72% do canvas,
 * o furo fica praticamente do tamanho da foto (138% x 72% = 99,4%) e os ornamentos crescem para
 * fora. Assim a foto nao encolhe nem perde legibilidade nos avatares de 16/24 px.
 */

[data-avatar-frame="support"]       { --avf-image: url("frames/support.png?v=2"); }
[data-avatar-frame="administrator"] { --avf-image: url("frames/administrator.png?v=2"); }
[data-avatar-frame="community"]     { --avf-image: url("frames/community.png?v=2"); }
[data-avatar-frame="page"]          { --avf-image: url("frames/page.png?v=2"); }
[data-avatar-frame="basic-1"]       { --avf-image: url("frames/basic-1.png?v=2"); }
[data-avatar-frame="basic-2"]       { --avf-image: url("frames/basic-2.png?v=2"); }
[data-avatar-frame="basic-3"]       { --avf-image: url("frames/basic-3.png?v=2"); }
[data-avatar-frame="basic-4"]       { --avf-image: url("frames/basic-4.png?v=2"); }
[data-avatar-frame="basic-5"]       { --avf-image: url("frames/basic-5.png?v=2"); }
[data-avatar-frame="silver-1"]      { --avf-image: url("frames/silver-1.png?v=2"); }
[data-avatar-frame="silver-2"]      { --avf-image: url("frames/silver-2.png?v=2"); }
[data-avatar-frame="silver-3"]      { --avf-image: url("frames/silver-3.png?v=2"); }
[data-avatar-frame="silver-4"]      { --avf-image: url("frames/silver-4.png?v=2"); }
[data-avatar-frame="silver-5"]      { --avf-image: url("frames/silver-5.png?v=2"); }
[data-avatar-frame="gold-1"]        { --avf-image: url("frames/gold-1.png?v=2"); }
[data-avatar-frame="gold-2"]        { --avf-image: url("frames/gold-2.png?v=2"); }
[data-avatar-frame="gold-3"]        { --avf-image: url("frames/gold-3.png?v=2"); }
[data-avatar-frame="gold-4"]        { --avf-image: url("frames/gold-4.png?v=2"); }
[data-avatar-frame="gold-5"]        { --avf-image: url("frames/gold-5.png?v=2"); }
[data-avatar-frame="platinum-1"]    { --avf-image: url("frames/platinum-1.png?v=2"); }
[data-avatar-frame="platinum-2"]    { --avf-image: url("frames/platinum-2.png?v=2"); }
[data-avatar-frame="platinum-3"]    { --avf-image: url("frames/platinum-3.png?v=2"); }
[data-avatar-frame="platinum-4"]    { --avf-image: url("frames/platinum-4.png?v=2"); }
[data-avatar-frame="platinum-5"]    { --avf-image: url("frames/platinum-5.png?v=2"); }
[data-avatar-frame="black-1"]       { --avf-image: url("frames/black-1.png?v=2"); }
[data-avatar-frame="black-2"]       { --avf-image: url("frames/black-2.png?v=2"); }
[data-avatar-frame="black-3"]       { --avf-image: url("frames/black-3.png?v=2"); }
[data-avatar-frame="black-4"]       { --avf-image: url("frames/black-4.png?v=2"); }
[data-avatar-frame="black-5"]       { --avf-image: url("frames/black-5.png?v=2"); }
[data-avatar-frame="luxury-1"]      { --avf-image: url("frames/luxury-1.png?v=2"); }
[data-avatar-frame="luxury-2"]      { --avf-image: url("frames/luxury-2.png?v=2"); }
[data-avatar-frame="luxury-3"]      { --avf-image: url("frames/luxury-3.png?v=2"); }
[data-avatar-frame="luxury-4"]      { --avf-image: url("frames/luxury-4.png?v=2"); }
[data-avatar-frame="luxury-5"]      { --avf-image: url("frames/luxury-5.png?v=2"); }

.o-avatar-v2[data-avatar-frame],
.o-avatar[data-avatar-frame],
.es-avatar[data-avatar-frame],
.esug-card__avwrap[data-avatar-frame],
.avf-avatar-host[data-avatar-frame] > .o-avatar-v2,
.mod-es-avatar .es-avatar-wrap[data-avatar-frame],
.es-uoc__avatar-wrap[data-avatar-frame] {
	isolation: isolate;
	overflow: visible !important;
	position: relative;
}

/* As molduras substituem os aneis genericos dessas duas caixas especiais. */
.mod-es-avatar .es-avatar-wrap[data-avatar-frame],
.es-uoc__avatar-wrap[data-avatar-frame] {
	background: none;
	padding: 0;
}

.o-avatar-v2[data-avatar-frame]::after,
.o-avatar[data-avatar-frame]::after,
.es-avatar[data-avatar-frame]::after,
.esug-card__avwrap[data-avatar-frame]::after,
.avf-avatar-host[data-avatar-frame] > .o-avatar-v2::after,
.mod-es-avatar .es-avatar-wrap[data-avatar-frame]::after,
.es-uoc__avatar-wrap[data-avatar-frame]::after {
	background: var(--avf-image) center / contain no-repeat;
	content: "";
	height: 138%;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 138%;
	z-index: 6;
}

.o-avatar-v2[data-avatar-frame] .o-avatar-v2__content,
.avf-avatar-host[data-avatar-frame] > .o-avatar-v2 .o-avatar-v2__content,
.o-avatar[data-avatar-frame] .o-avatar__content {
	border-radius: 50% !important;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

.o-avatar-v2[data-avatar-frame] .o-avatar-v2__content img,
.avf-avatar-host[data-avatar-frame] > .o-avatar-v2 .o-avatar-v2__content img,
.o-avatar[data-avatar-frame] .o-avatar__content img,
.es-avatar[data-avatar-frame] > img,
.esug-card__avwrap[data-avatar-frame] > .esug-card__av,
.mod-es-avatar .es-avatar-wrap[data-avatar-frame] .es-avatar-img,
.es-uoc__avatar-wrap[data-avatar-frame] .es-uoc__avatar {
	border-radius: 50% !important;
}

/* Estado online, botao de edicao e badges precisam continuar acima da moldura. */
.o-avatar-v2[data-avatar-frame] .o-avatar-v2__mobile,
.o-avatar-v2[data-avatar-frame] .o-avatar-v2__action,
.mod-es-avatar .es-avatar-wrap[data-avatar-frame] .es-avatar-overlay {
	position: relative;
	z-index: 8;
}

/* Os dois papeis especiais recebem um brilho sutil adicional sem animacao permanente. */
[data-avatar-frame="administrator"]::after {
	filter: drop-shadow(0 0 6px rgba(255, 197, 51, .45));
}

[data-avatar-frame="support"]::after {
	filter: drop-shadow(0 0 5px rgba(61, 203, 255, .4));
}

[data-avatar-frame="community"]::after {
	filter: drop-shadow(0 0 5px rgba(32, 154, 255, .38));
}

[data-avatar-frame="page"]::after {
	filter: drop-shadow(0 0 5px rgba(227, 73, 255, .34));
}

@media (prefers-reduced-motion: no-preference) {
	.o-avatar-v2[data-avatar-frame],
	.o-avatar[data-avatar-frame],
	.es-avatar[data-avatar-frame],
	.esug-card__avwrap[data-avatar-frame],
	.avf-avatar-host[data-avatar-frame] > .o-avatar-v2,
	.mod-es-avatar .es-avatar-wrap[data-avatar-frame],
	.es-uoc__avatar-wrap[data-avatar-frame] {
		transition: filter .18s ease;
	}

	.o-avatar-v2[data-avatar-frame]:hover,
	.o-avatar[data-avatar-frame]:hover,
	.es-avatar[data-avatar-frame]:hover,
	.esug-card__avwrap[data-avatar-frame]:hover,
	.avf-avatar-host[data-avatar-frame]:hover > .o-avatar-v2,
	.mod-es-avatar .es-avatar-wrap[data-avatar-frame]:hover,
	.es-uoc__avatar-wrap[data-avatar-frame]:hover {
		filter: brightness(1.08);
	}
}