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

.editor-collaborators-presence {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	height: $button-size-compact;
	background: $gray-100;
	border-radius: $grid-unit-05;
	margin-right: $grid-unit-10;

	&:hover {
		background-color: $gray-200;
	}

	&:has(.is-pressed) {
		background-color: $gray-200;
	}
}

.editor-collaborators-presence__button.editor-collaborators-presence__button.components-button {
	display: flex;
	align-items: center;
	cursor: var(--wpds-cursor-control);
	position: relative;
	padding: $grid-unit-05;
	border-radius: $grid-unit-05;
	height: 100%;
	box-sizing: border-box;
	color: $gray-800;
	background: transparent;

	// Override default button hover
	&:hover {
		background: transparent;
		color: $gray-800;
	}

	// Override pressed state - let the container handle the background
	&.is-pressed,
	&.is-pressed:hover {
		background: transparent;
		color: $gray-800;
	}

	// Fix focus ring to be contained within the button
	&:focus:not(:active) {
		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 2px) var(--wp-admin-theme-color, #007cba);
		outline: none;
	}
}