/*
 * How an avatar sits inside its circle. Where and how big is still the theme's
 * call — this file only decides what happens to an image whose proportions do
 * not match the box.
 *
 * Specificity is deliberate: img.avatar is (0,0,1,1) and the theme's
 * .sb-meta__avatar is (0,0,1,0), so these rules land on top without !important
 * and without the theme having to know they exist.
 */

/*
 * A face wants to be cropped to fill the circle. Without this the theme's own
 * width/height on a non-square upload stretches it instead of cropping it,
 * which is how the theme behaves today.
 */
img.avatar {
	object-fit: cover;
}

/*
 * A logo does not. contain plus an inset keeps it whole inside the circle, and
 * the background fills what the logo does not cover — a white wordmark on a
 * white page is invisible without it, which is the usual way this goes wrong.
 *
 * Applies to the shared default only. Core adds its own avatar-default class
 * alongside this one; matching ours keeps the rule tied to our decision rather
 * than to core's.
 *
 * The inset is in px, never a percentage: percentage padding on an <img>
 * resolves against the CONTAINING BLOCK's width, not against the image. In a
 * 1440px content column `padding: 12%` came out as 173px a side, and with
 * box-sizing: border-box that floors the content box at 0 and the used size at
 * the padding — a 45px avatar rendered as a 346px blank circle on every site
 * whose author has no picture. Vertical padding resolves against that same
 * width, so the height went with it.
 */
img.avatar.mirabo-avatar--default {
	object-fit: contain;
	padding: 3px;
	background: var(--mirabo-avatar-bg, #fff);
	box-sizing: border-box;
}

/*
 * ~12% of the avatar, one value per size get_avatar() is actually called with:
 * 24 and 30 (card meta, popular rail) keep the 3px above, and these are the
 * rest. An unlisted size gets 3px, which is thin rather than broken.
 *
 * The theme shrinks its 120px avatar to 84/72px under 1024/768px without
 * changing the class, so the inset there reads a little deeper on small
 * screens. That is a proportion, not a layout break.
 */
img.avatar-45.mirabo-avatar--default {
	padding: 5px;
}

img.avatar-96.mirabo-avatar--default {
	padding: 11px;
}

img.avatar-120.mirabo-avatar--default {
	padding: 14px;
}

/*
 * The picker on the profile and settings screens.
 *
 * The preview reuses the img.avatar rules above on purpose, so what an
 * administrator sees while choosing is what a visitor gets.
 */
.mirabo-avatar-field img.avatar {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	display: block;
	border: 1px solid #dcdcde;
}

/*
 * picker_markup() writes the class list itself and has no avatar-96 on it, so
 * the size-keyed inset above never reaches the preview. Repeat it here rather
 * than teach the markup a class it does not otherwise use.
 */
.mirabo-avatar-field img.avatar.mirabo-avatar--default {
	padding: 11px;
}

.mirabo-avatar-field__actions {
	margin: 8px 0 0;
}

.mirabo-avatar-field [hidden] {
	display: none;
}