// 地图组件共用样式变量和混合

// Z-Index层级
$map-z-index-base: 1;
$map-z-index-toolbar: 11;
$map-z-index-panel: 10;
$map-z-index-expand-btn: 12;

// 尺寸规格
$toolbar-width: 60px;
$toolbar-btn-size: 36px;
$toolbar-btn-size-sm: 32px;
$panel-width-default: 360px;
$panel-width-min: 320px;
$panel-width-max: 420px;
$resize-handle-width: 8px;

// 间距
$toolbar-gap: 8px;
$toolbar-padding: 12px;
$panel-padding: var(--spacing-4);
$card-margin-bottom: 16px;

// 圆角
$toolbar-border-radius: var(--radius-lg);
$panel-border-radius: var(--radius-lg);
$btn-border-radius: 50%;

// 阴影
$toolbar-shadow: var(--shadow-lg);
$panel-shadow: var(--shadow-xl);
$btn-hover-shadow: var(--shadow-md);

// 动画时长
$transition-duration: var(--duration-200);
$animation-ease: var(--ease-out);

// 混合：工具栏按钮基础样式
@mixin toolbar-btn-base {
  width: $toolbar-btn-size !important;
  height: $toolbar-btn-size !important;
  min-width: $toolbar-btn-size !important;
  min-height: $toolbar-btn-size !important;
  border-radius: $btn-border-radius !important;
  border: 1px solid var(--color-border-secondary);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  transition: all $transition-duration $animation-ease;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;

  &:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-primary);
    border-color: var(--color-border-primary);
    transform: translateY(-1px);
    box-shadow: $btn-hover-shadow;
  }

  &:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    
    &:hover {
      background: var(--color-bg-card);
      color: var(--color-text-secondary);
      border-color: var(--color-border-secondary);
      transform: none;
      box-shadow: none;
    }
  }
}

// 混合：主要按钮样式
@mixin toolbar-btn-primary {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  border-color: var(--color-primary) !important;

  &:hover {
    background: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
  }

  &:disabled {
    background: var(--color-text-quaternary) !important;
    border-color: var(--color-text-quaternary) !important;
    color: var(--color-text-inverse) !important;
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }
}

// 混合：卡片基础样式
@mixin info-card-base {
  background: var(--color-bg-card);
  border-radius: $panel-border-radius;
  box-shadow: var(--shadow-card);
  margin-bottom: $card-margin-bottom;
  overflow: hidden;

  &:last-child {
    margin-bottom: 0;
  }

  .card-header {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-border-secondary);
    background: var(--color-bg-secondary);

    .card-title {
      margin: 0;
      font-size: var(--font-size-base);
      font-weight: var(--font-weight-semibold);
      color: var(--color-text-primary);
    }
  }

  .card-content {
    padding: var(--spacing-4);
  }
}

// 混合：自定义滚动条
@mixin custom-scrollbar {
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-full);
  }

  &::-webkit-scrollbar-thumb {
    background: var(--color-border-primary);
    border-radius: var(--radius-full);
    
    &:hover {
      background: var(--color-text-quaternary);
    }
  }
}

// 混合：暗色主题适配 - 注意：这些混合需要在具体选择器内部使用
@mixin dark-theme-toolbar-content {
  background: rgba(31, 41, 55, 0.9);
  border-color: var(--color-border-tertiary);

  .toolbar-btn {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-tertiary);

    &:hover {
      background: var(--color-bg-quaternary);
      border-color: var(--color-border-secondary);
    }
  }

  .toolbar-divider {
    background: var(--color-border-tertiary);
  }
}

@mixin dark-theme-panel-content {
  .panel-header {
    background: var(--color-bg-quaternary);
  }

  .info-card {
    background: var(--color-bg-tertiary);
    box-shadow: var(--shadow-card);

    .card-header {
      background: var(--color-bg-quaternary);
    }
  }
}
