@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/variables" as *;

// Accent color for the avatar. Uses the admin theme color with a hardcoded
// fallback matching the default WordPress admin blue.
$-accent-color: var(--wp-admin-theme-color, #3858e9);

// overflow: clip is intentionally omitted here — .editor-avatar__image handles
// its own circular clip. Removing overflow from this container allows the inset
// box-shadow on __image to render without being clipped by the parent.
.editor-avatar {
	position: relative;
	display: inline-flex;
	align-items: center;
	border-radius: $radius-full;
	flex-shrink: 0;
	box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $white, $elevation-x-small;
}

.editor-avatar__image {
	box-sizing: border-box;
	position: relative;
	width: $button-size-compact;
	height: $button-size-compact;
	border-radius: $radius-full;
	border: 0;
	background-color: $-accent-color;
	overflow: hidden;
	overflow: clip;
	flex-shrink: 0;
	font-size: 0;
	color: $white;

	.is-small > & {
		width: $button-size-small;
		height: $button-size-small;
	}

	.has-avatar-border-color > & {
		border: var(--wp-admin-border-width-focus) solid var(--editor-avatar-outline-color);
		background-clip: padding-box;

		// Inner contrast ring rendered as a pseudo-element so it paints above
		// the absolutely-positioned <img>. An inset box-shadow would be
		// covered by the image content layer.
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: inherit;
			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) $white;
			pointer-events: none;
			z-index: 1;
		}
	}
}

// The <img> element, absolutely positioned to fill the __image container.
// Starts invisible; becomes visible when the image loads (has-src class).
.editor-avatar__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
	opacity: 0;

	.has-src > .editor-avatar__image > & {
		opacity: 1;
	}
}

// Initials fallback: show name characters when no image has loaded.
.editor-avatar:not(.has-src) > .editor-avatar__image {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: $font-size-x-small;
	font-weight: $font-weight-medium;
	border: 0;
	background-clip: border-box;

	&::after {
		content: none;
	}
}

.editor-avatar:not(.has-src).has-avatar-border-color > .editor-avatar__image {
	background-color: var(--editor-avatar-outline-color);
}

.editor-avatar__name {
	font-size: $font-size-medium;
	font-weight: $font-weight-medium;
	line-height: $font-line-height-small;
	color: var(--editor-avatar-name-color, $white);
	min-width: 0;
	padding-bottom: calc($grid-unit-05 / 2);
	overflow: hidden;
	opacity: 0;
	white-space: nowrap;
	transition: opacity 0.15s cubic-bezier(0.15, 0, 0.15, 1);
}

// Badge mode: use grid so the name column animates from 0 to natural width.
// Spacing is on the container (column-gap + padding-inline-end) so it
// transitions alongside grid-template-columns instead of causing a bump.
.editor-avatar.is-badge {
	display: inline-grid;
	grid-template-columns: min-content 0fr;
	column-gap: 0;
	padding-inline-end: 0;
	background-color: $-accent-color;
	transition:
		grid-template-columns 0.3s cubic-bezier(0.15, 0, 0.15, 1),
		column-gap 0.3s cubic-bezier(0.15, 0, 0.15, 1),
		padding-inline-end 0.3s cubic-bezier(0.15, 0, 0.15, 1);

	&:hover {
		grid-template-columns: min-content 1fr;
		column-gap: $grid-unit-05;
		padding-inline-end: $grid-unit-10;
		transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
	}

	&:hover .editor-avatar__name {
		opacity: 1;
		transition-timing-function: cubic-bezier(0.85, 0, 0.85, 1);
	}
}

.editor-avatar.is-badge.has-avatar-border-color {
	background-color: var(--editor-avatar-outline-color);
}

// Dimmed: neutral gray background at 50% opacity. The status indicator is a
// sibling (outside __image) so it stays at full opacity.
.editor-avatar.is-dimmed > .editor-avatar__image {
	opacity: 0.5;
	background-color: $gray-700;
}

.editor-avatar.is-dimmed.has-avatar-border-color > .editor-avatar__image {
	border-color: $gray-700;
}

// Dimmed images: desaturate via CSS filter instead of mix-blend-mode.
.editor-avatar.is-dimmed .editor-avatar__img {
	filter: grayscale(1);
}

// Status indicator: positioned over the image area, outside __image so it
// is unaffected by the dimmed opacity.
.editor-avatar__status-indicator {
	position: absolute;
	top: 0;
	left: 0;
	width: $button-size-compact;
	height: $button-size-compact;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	color: $gray-900;
	fill: $gray-900;

	.is-small > & {
		width: $button-size-small;
		height: $button-size-small;
	}

	svg {
		width: 75%;
		height: 75%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.editor-avatar.is-badge,
	.editor-avatar__name {
		transition: none;
	}
}