:host {
	.panel-button {
		border-radius: var(--ov-toolbar-buttons-radius);
		color: var(--ov-text-primary-color);

		// Custom badge styles for participants and chat buttons
		::ng-deep .mat-badge-content {
			background-color: var(--ov-accent-action-color) !important;
			color: var(--ov-text-primary-color) !important;
			font-weight: 600;
			font-size: 10px;
			min-width: 16px;
			height: 16px;
			line-height: 16px;
		}

		::ng-deep .mat-badge-small .mat-badge-content {
			font-size: 9px;
			min-width: 14px;
			height: 14px;
			line-height: 14px;
		}
	}

	.active-btn,
	::ng-deep .active-btn {
		background-color: var(--ov-accent-action-color) !important;
	}

	// Collapsed menu styles for small screens
	.collapsed-menu-container {
		position: relative;
		display: flex;
		align-items: center;
	}

	.fab-menu-trigger:has(.rotated) {
		transform: rotate(180deg);
	}
	// FAB-style trigger button
	.fab-menu-trigger {
		background-color: var(--ov-primary-action-color);
		color: var(--ov-text-primary-color);
		transition: all 0.2s ease-in-out;
		height: 36px;
		width: 36px;
		padding: 8px 0;
		transition: transform 0.3s ease;

		mat-icon {
			font-size: 20px;
		}
	}
}

// Global styles for the collapsible panels menu
::ng-deep .cdk-overlay-pane {
	width: auto !important;
}
::ng-deep .cdk-overlay-connected-position-bounding-box {
	right: 0 !important;
}
.panels-menu,
::ng-deep .panels-menu,
.panels-menu .mat-mdc-menu-panel,
.panels-menu .mat-mdc-menu-content,
::ng-deep .panels-menu .mat-mdc-menu-panel,
::ng-deep .panels-menu .mat-mdc-menu-content {
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
	min-width: 50px !important;
	width: 50px !important;
	max-width: 50px !important;
	padding: 4px 0 !important;
	display: grid !important;
}

.panels-menu,
::ng-deep .panels-menu {
	.panel-menu-item {
		background-color: var(--ov-primary-action-color) !important;
		color: var(--ov-text-primary-color) !important;
		border-radius: var(--ov-toolbar-buttons-radius) !important;
		min-height: 36px !important;
		padding: 8px !important;
		margin: 5px 0;
		height: 36px !important;
		width: 36px !important;
		display: flex !important;
		// box-shadow: 0 2px 4px color-mix(in srgb, var(--ov-text-primary-color) 100%, transparent);
		transition:
			box-shadow 0.2s ease,
			transform 0.2s ease;

		&.active-menu-item {
			background-color: var(--ov-accent-action-color) !important;
			color: var(--ov-text-primary-color) !important;
		}

		&:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}

		mat-icon {
			font-size: 20px !important;
			width: 20px !important;
			height: 20px !important;
			margin: 0 !important;
			color: var(--ov-text-primary-color) !important;
		}

		// Chat badge adjustments for menu
		::ng-deep .mat-badge-content {
			background-color: var(--ov-accent-action-color) !important;
			color: var(--ov-text-primary-color) !important;
			font-size: 10px !important;
			font-weight: 600 !important;
			min-width: 14px !important;
			height: 14px !important;
			line-height: 14px !important;
			border-radius: 7px !important;
			top: -2px !important;
			right: -2px !important;
		}

		// Remove default mat-menu-item styles
		.mat-mdc-menu-item-text {
			display: none !important;
		}

		// Remove focus outline
		&:focus {
			outline: none !important;
		}

		// Remove ripple effect
		.mat-mdc-menu-ripple {
			display: none !important;
		}
	}

	// Custom scrollbar for menu if needed
	.mat-mdc-menu-content {
		&::-webkit-scrollbar {
			width: 4px;
		}

		&::-webkit-scrollbar-track {
			background: transparent;
		}

		&::-webkit-scrollbar-thumb {
			background: rgba(var(--ov-secondary-action-color-rgb), 0.3);
			border-radius: 2px;
		}
	}
}
