/**
 * ViewSwitcher.css - MIDI 音轨 / 五线谱 视图切换器
 */

/* 视图切换器容器 */
.view-switcher-container {
	position: fixed;
	top: 60px; /* 在顶部菜单下方 */
	left: 50%;
	transform: translateX(-50%);
	z-index: 200;
	display: flex;
	align-items: center;
	gap: 0;
	background: rgba(26, 26, 46, 0.95);
	border-radius: 8px;
	padding: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(233, 69, 96, 0.3);
	backdrop-filter: blur(10px);
}

.view-switcher-container.hidden {
	display: none;
}

/* 切换按钮 */
.view-switch-btn {
	padding: 10px 24px;
	background: transparent;
	border: none;
	color: #8892b0;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	border-radius: 6px;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 120px;
	justify-content: center;
	position: relative;
}

.view-switch-btn:hover {
	color: #e94560;
	background: rgba(233, 69, 96, 0.1);
}

.view-switch-btn.active {
	background: linear-gradient(135deg, #e94560 0%, #c32f4c 100%);
	color: #ffffff;
	box-shadow: 0 2px 8px rgba(233, 69, 96, 0.4);
}

.view-switch-btn .icon {
	font-size: 16px;
}

/* 分隔线 */
.view-switch-divider {
	width: 1px;
	height: 24px;
	background: rgba(233, 69, 96, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
	.view-switcher-container {
		top: 50px;
		padding: 3px;
	}
	
	.view-switch-btn {
		padding: 8px 16px;
		font-size: 12px;
		min-width: 100px;
	}
	
	.view-switch-btn .icon {
		font-size: 14px;
	}
}