@import "./TapHighlightColor.css";

:host(:not([hidden])) {
	display: block;
	width: 100%;
}

.ui5-avatar-group-items:focus {
	outline: none;
}

:host([type="Group"][desktop]) .ui5-avatar-group-items:focus,
:host([type="Group"]) .ui5-avatar-group-items:focus-visible {
	outline: var(--_ui5_avatar_outline);
	outline-offset: var(--_ui5_avatar_focus_offset);
	border-radius: var(--_ui5_avatar_group_focus_border_radius);
}

.ui5-avatar-group-root {
	display: flex;
	padding: var(--_ui5_avatar_group_padding);
}

.ui5-avatar-group-items {
	white-space: nowrap;
	position: relative;
	display: inline-flex;
}

:host([type="Group"]) .ui5-avatar-group-items {
	cursor: pointer;
}

/* In Group mode: apply hover/active states to ALL avatars when container is hovered/active */
:host([type="Group"]) .ui5-avatar-group-items:not(:active):hover ::slotted([ui5-avatar]:not([disabled])) {
	box-shadow: var(--ui5-avatar-hover-box-shadow-offset);
}

:host([type="Group"]) .ui5-avatar-group-items:active ::slotted([ui5-avatar]) {
	background-color: var(--sapButton_Active_Background);
	border-color: var(--sapButton_Active_BorderColor);
	color: var(--sapButton_Active_TextColor);
}

/* Overflow button hover/active states in Group mode */
:host([type="Group"]) .ui5-avatar-group-items:not(:active):hover .ui5-avatar-group-overflow-btn {
	box-shadow: var(--ui5-avatar-hover-box-shadow-offset);
	background-color: var(--sapButton_Lite_Hover_Background);
}

:host([type="Group"]) .ui5-avatar-group-items:active .ui5-avatar-group-overflow-btn {
	background-color: var(--sapButton_Active_Background);
	border-color: var(--sapButton_Active_BorderColor);
	color: var(--sapButton_Active_TextColor);
}

/* Prevent individual avatars and buttons from intercepting clicks/focus in Group mode */
:host([type="Group"]) ::slotted([ui5-button]),
:host([type="Group"]) ::slotted([ui5-avatar]),
:host([type="Group"]) .ui5-avatar-group-overflow-btn {
	pointer-events: none;
}

.ui5-avatar-group-overflow-btn {
	overflow: visible;
}

.ui5-avatar-group-overflow-btn::part(button) {
	min-width: auto;
}

::slotted([ui5-button]:not([hidden])),
.ui5-avatar-group-overflow-btn:not([hidden]) {
	--_ui5_button_focused_border: var(--_ui5_avatar_group_button_focus_border);
	--_ui5_button_base_padding: 0;
	border-radius: 50%;
	display: inline-flex;
	text-overflow: initial;
	z-index: 0; /* prevent last visible avatar from covering half of the button */
}

::slotted([ui5-button][desktop]:focus),
.ui5-avatar-group-overflow-btn[desktop]:focus {
	outline: var(--_ui5_avatar_outline);
	outline-offset: var(--_ui5_avatar_overflow_button_focus_offset);
}

.ui5-avatar-group-overflow-btn::part(button):focus-visible:after {
	outline: var(--_ui5_avatar_outline);
	outline-offset: var(--_ui5_avatar_focus_offset);
	border-radius: 50%;
}

.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs {
	height: 2rem;
	width: 2rem;
	min-width: 2rem;
	font-size: .75rem;
}

::slotted([ui5-button]),
.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-s {
	height: 3rem;
	width: 3rem;
	min-width: 3rem;
	font-size: 1.125rem;
}

.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-m {
	height: 4rem;
	width: 4rem;
	min-width: 4rem;
	font-size: 1.625rem;
}

.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-l {
	height: 5rem;
	width: 5rem;
	min-width: 5rem;
	font-size: 2rem;
}

.ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xl {
	height: 7rem;
	width: 7rem;
	min-width: 7rem;
	font-size: 2.75rem;
}