/* ============================================================================
   ACTION BUTTON STYLING
   ============================================================================ */

.ui5-shellbar-action-button {
	width: 2.25rem;
	height: 2.25rem;
	color: var(--sapShell_TextColor);
}

.ui5-shellbar-action-button:hover {
	background: var(--sapShell_Hover_Background);
	border-color: var(--sapButton_Lite_Hover_BorderColor);
	color: var(--sapShell_InteractiveTextColor);
}

.ui5-shellbar-action-button[active] {
	color: var(--_ui5_shellbar_button_active_color);
}

.ui5-shellbar-action-button > [ui5-button-badge][slot="badge"][design="OverlayText"] {
	top: var(--_ui5-shellbar-badge-offset, 0);
	margin: var(--_ui5-shellbar-badge-margin, -0.5rem);
}

[ui5-li]::part(icon) {
	color: var(--sapList_TextColor);
	align-self: center;
}

/* Keep the text wrapper hugging its content so the badge sits right after
   the item text (Figma spec) instead of being pushed to the far end. */
[ui5-li] {
	--_ui5_li_text_wrapper_flex: 0 1 auto;
}

[ui5-li]::part(additional-text) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 1rem;
	min-width: 1rem;
	padding: 0 0.3125rem;
	border-radius: 0.5rem;
	border: var(--_ui5_shellbar_button_badge_border);
	background: var(--sapContent_BadgeBackground);
	color: var(--sapContent_BadgeTextColor);
	font-size: var(--sapFontSmallSize);
	font-family: var(--sapFontBoldFamily);
	font-weight: bold;
	white-space: nowrap;
	flex-shrink: 0;
	box-sizing: border-box;
	pointer-events: none;
	/* The hover rule in ListItemBase has specificity (0,6,0); !important is
	   the only practical way to ensure no text-shadow on the badge pill. */
	text-shadow: none !important;
	align-self: center;
	/* ~4px gap after the item text, per Figma spec. */
	margin-inline-start: 0.25rem;
}

/* Override active-state color from ListItem.css (specificity 0,3,0). */
[ui5-li][active][actionable]::part(additional-text) {
	color: var(--sapContent_BadgeTextColor);
	background: var(--sapContent_BadgeBackground);
}

/* Override wrapping-type=Normal left-padding from ListItem.css (0,3,0). */
[ui5-li][wrapping-type="Normal"][additional-text]::part(additional-text) {
	padding-inline-start: 0.3125rem;
}