// Shared styles for device selectors (video and audio)
// This file contains common styling for both video-devices and audio-devices components

@mixin device-selector-base() {
	display: flex;
	align-items: center;
	width: 100%;

	// Compact Mode - Unified Button
	&.compact {
		.unified-device-button {
			display: flex;
			background: var(--ov-primary-action-color);
			backdrop-filter: blur(20px);
			border-radius: 12px;
			overflow: hidden;
			transition: all 0.2s ease;

			.toggle-section {
				display: flex;
				align-items: center;
				justify-content: center;
				min-width: 50px;
				width: 50px;
				height: 48px;
				border: none;
				background: transparent;
				border-radius: 0;
				padding: 0;
				transition: all 0.2s ease;

				&.device-enabled {
					color: var(--ov-text-primary-color);

					mat-icon {
						color: var(--ov-text-primary-color);
					}
				}

				&.device-disabled {
					background: var(--ov-error-color);
					color: var(--ov-text-surface-color);

					mat-icon {
						color: var(--ov-text-surface-color);
					}
				}

				mat-icon {
					font-size: 20px;
					width: 20px;
					height: 20px;
					margin: 0;
				}
			}

			.dropdown-section {
				display: flex;
				align-items: center;
				justify-content: center;
				min-width: 30px;
				width: 30px;
				height: 48px;
				border: none;
				background: transparent;
				border-radius: 0;
				padding: 0;
				color: var(--ov-text-secondary-color, #666);
				transition: all 0.2s ease;

				mat-icon {
					font-size: 16px;
					width: 16px;
					height: 16px;
					margin: 0;
				}
			}
		}
	}

	// Normal Mode - Input Style Selector
	&:not(.compact) {
		.normal-device-selector {
			display: flex;
			align-items: center;
			gap: 12px;
			width: 100%;

			.device-input-selector {
				flex: 1;

				&:not(.disabled) {
					.selector-button {
						display: flex;
						align-items: center;
						gap: 12px;
						width: 100%;
						height: 48px;
						padding: 0 16px;
						background: var(--ov-surface-color, #ffffff);
						border: 1px solid var(--ov-secondary-action-color, #e0e0e0);
						border-radius: 8px;
						color: var(--ov-text-surface-color);
						font-size: 14px;
						font-weight: 500;
						transition: all 0.2s ease;
						text-align: left;
						justify-content: flex-start;

						&[disabled] {
							background: var(--ov-disabled-background, #f5f5f5);
							color: var(--ov-disabled-text-color, #999);
							cursor: not-allowed;
							border-color: var(--ov-disabled-border-color, #ddd);
						}

						.device-icon {
							font-size: 18px;
							width: 18px;
							height: 18px;
							color: var(--ov-text-secondary-color, #666);
							flex-shrink: 0;
						}

						.selected-device-name {
							flex: 1;
							text-overflow: ellipsis;
							overflow: hidden;
						}

						.dropdown-icon {
							font-size: 18px;
							width: 18px;
							height: 18px;
							color: var(--ov-text-secondary-color, #666);
							flex-shrink: 0;
							transition: transform 0.2s ease;
						}

						&[aria-expanded='true'] .dropdown-icon {
							transform: rotate(180deg);
						}
					}
				}

				&.disabled {
					.selector-button.disabled {
						display: flex;
						align-items: center;
						gap: 12px;
						height: 48px;
						padding: 0 16px;
						background: var(--ov-disabled-background, #f5f5f5);
						border: 1px solid var(--ov-disabled-border-color, #ddd);
						border-radius: 8px;
						color: var(--ov-disabled-text-color, #999);
						font-size: 14px;
						cursor: not-allowed;

						.device-icon {
							font-size: 18px;
							width: 18px;
							height: 18px;
							color: var(--ov-error-color, #d32f2f);
						}

						.selected-device-name {
							flex: 1;
							font-style: italic;
						}
					}
				}
			}
		}
	}

	.no-device-message {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 8px 12px;
		background: var(--ov-primary-action-color);
		border: 1px solid  var(--ov-warning-color, #ff9800);
		border-radius: 8px;
		font-size: 12px;
		color: var(--ov-text-primary-color);

		.warning-icon {
			color: var(--ov-warning-color, #ff9800);
			font-size: 16px;
			width: 16px;
			height: 16px;
		}
	}
}

// Shared device menu styles
@mixin device-menu-styles() {
	::ng-deep .device-menu.mat-mdc-menu-panel {
		border-radius: 12px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
		border: 1px solid var(--ov-secondary-action-color, #e0e0e0);
		overflow: hidden;
		background-color: var(--ov-surface-color);

		.mat-mdc-menu-item {
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 12px 16px;
			transition: background-color 0.2s ease;
			font-size: 14px;
			color: var(--ov-text-surface-color);

			&:hover {
				background-color: var(--ov-hover-color);
			}

			&.selected {
				background-color: var(--ov-accent-action-color);

				mat-icon {
					color: var(--ov-text-surface-color);
				}
			}

			mat-icon {
				font-size: 18px;
				width: 18px;
				height: 18px;
			}

			span {
				flex: 1;
				font-weight: 500;
			}
		}
	}
}

// Selector button mixin
@mixin selector-button($icon-class, $name-class, $expand-class) {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: var(--ov-surface-color, #ffffff);
	border: 1px solid var(--ov-secondary-action-color, #e0e0e0);
	border-radius: var(--ov-surface-radius, 8px);
	transition: all 0.2s ease;
	color: var(--ov-text-primary-color, #333);
	font-weight: 500;
	min-width: 150px;

	.#{$name-class} {
		text-transform: capitalize;
	}

	&:hover {
		box-shadow: 0 2px 8px rgba(66, 133, 244, 0.1);
	}

	.#{$icon-class} {
		font-size: 18px;
		width: 18px;
		height: 18px;
		color: var(--ov-text-surface-color, #666);
	}

	.#{$name-class} {
		font-size: 14px;
		font-weight: 500;
		display: inline-block !important;
		color: var(--ov-text-surface-color) !important;
	}

	.#{$expand-class} {
		font-size: 16px;
		width: 16px;
		min-width: 16px;
		height: 16px;
		min-height: 16px;
		color: var(--ov-text-secondary-color, #666);
		transition: transform 0.2s ease;
		vertical-align: bottom;
	}

	&[aria-expanded='true'] .#{$expand-class} {
		transform: rotate(180deg);
	}
}

// selector menu mixin
@mixin selector-menu($option-class, $option-name-class) {
	border-radius: var(--ov-surface-radius, 8px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
	border: 1px solid var(--ov-secondary-action-color);
	overflow: hidden;
	background: var(--ov-surface-color);

	.#{$option-class} {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 16px;
		transition: background-color 0.2s ease;
		font-size: 14px;
		min-height: 48px;
		color: var(--ov-text-surface-color);

		&:hover {
			background-color: var(--ov-hover-color);
		}

		&.selected {
			background-color: var(--ov-accent-action-color);

			.check-icon {
				color: var(--ov-text-surface-color);
			}
		}

		.check-icon {
			font-size: 18px;
			width: 18px;
			height: 18px;
		}

		.#{$option-name-class} {
			text-transform: capitalize;

			flex: 1;
			font-weight: 500;
		}
	}
}
