/**
 * Canvas渲染器样式
 * 为Canvas渲染的标记点提供样式支持
 */

/* Canvas图层样式 */
.leaflet-canvas-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; /* 默认不接收鼠标事件 */
}

/* 确保Canvas标记点可以接收鼠标事件 */
.leaflet-canvas-marker {
  pointer-events: auto;
  cursor: pointer;
}

/* 标记点悬停效果 */
.leaflet-canvas-marker:hover {
  filter: brightness(1.2);
}

/* 标记点激活效果 */
.leaflet-canvas-marker.active {
  filter: brightness(1.5);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}

/* 优化Canvas渲染器设置UI */
#canvas-renderer-switch-container {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.dark-mode #canvas-renderer-switch-container {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* 渲染器设置标题 */
.renderer-settings-title {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 10px;
  color: #555;
}

.dark-mode .renderer-settings-title {
  color: #ccc;
}

/* 渲染器性能指示器 */
.renderer-performance-indicator {
  display: flex;
  align-items: center;
  margin-top: 8px;
  font-size: 0.8rem;
  color: #666;
}

.dark-mode .renderer-performance-indicator {
  color: #aaa;
}

.renderer-performance-bar {
  height: 4px;
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}

.dark-mode .renderer-performance-bar {
  background-color: #444;
}

.renderer-performance-value {
  height: 100%;
  background-color: #4CAF50;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* 性能状态颜色 */
.performance-good {
  background-color: #4CAF50;
}

.performance-medium {
  background-color: #FFC107;
}

.performance-poor {
  background-color: #F44336;
}

/* 渲染器设置描述 */
.renderer-settings-description {
  font-size: 0.8rem;
  color: #777;
  margin-top: 5px;
}

.dark-mode .renderer-settings-description {
  color: #999;
}

/* 渲染器设置开关 */
.renderer-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

.renderer-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.renderer-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.renderer-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .renderer-slider {
  background-color: #2196F3;
}

input:focus + .renderer-slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .renderer-slider:before {
  transform: translateX(16px);
}

/* 深色模式适配 */
.dark-mode .renderer-slider {
  background-color: #555;
}

.dark-mode input:checked + .renderer-slider {
  background-color: #4CAF50;
}

.dark-mode input:focus + .renderer-slider {
  box-shadow: 0 0 1px #4CAF50;
}