.InfoControl {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: minmax(0, max-content) max-content minmax(0, max-content);
	align-items: center;
	width: 100%;
	min-height: var(--slds-g-spacing-7); // 40px
	box-sizing: border-box;

	// Phone UX: Stack InfoItems vertically
	@media @phone {
		grid-auto-flow: row;
		grid-template-columns: 1fr;
		gap: var(--slds-g-spacing-3); // 12px vertical gap between stacked items
	}

	.InfoItem {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0;
		gap: var(--slds-g-spacing-3); // 12px
		min-width: 0; // Allow flex children to shrink below content size for truncation
		position: relative;
		overflow: hidden;

		// Phone UX: Allow action buttons to wrap to next row
		@media @phone {
			flex-wrap: wrap;
		}

		.InfoItemIcon {
			width: var(--slds-g-spacing-7); // 40px
			height: var(--slds-g-spacing-7); // 40px
			border-radius: var(--slds-g-radius-border-1); // 4px
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;

			&.InfoItemIcon--rounded {
				clip-path: circle(50% at center);
				-webkit-clip-path: circle(50% at center);
			}

			.InfoItemDefaultImageWrapper {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					max-width: 100%;
					max-height: 100%;
					object-fit: contain;
				}
			}
		}

		.InfoItemContent {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			padding: 0;
			gap: var(--slds-g-spacing-1); // 4px
			min-width: 0; // Allow flex child to shrink for text truncation
			overflow: hidden;

			> * {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				width: 100%;
				min-width: 0; // Required for text truncation in flex containers
			}
		}

		.InfoItemActionIcons {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0;
			gap: var(--slds-g-spacing-5); // 24px - spacing between ImageButton elements
			flex-shrink: 0;
			margin-left: var(--slds-g-spacing-3); // 12px

			// Phone UX: Reduce gap and right-align action buttons
			@media @phone {
				gap: var(--slds-g-spacing-3); // 12px on phone
				margin-left: auto; // Push buttons to right edge
			}
		}
	}

	.InfoItemSeparator {
		width: 0; // No horizontal width - border-left provides the visual line
		height: 2.1635rem; // 36px - vertical separator line height
		border-left: var(--slds-g-sizing-border-1) solid var(--slds-g-color-border-1);
		margin: 0 var(--slds-g-spacing-5); // 24px horizontal margin on each side

		// Phone UX: Hide separator in vertical stacked layout
		@media @phone {
			display: none;
		}
	}
}