// 响应式布局样式
// 导入变量文件 - 使用 @use 替换 @import 以消除 Sass 3.0.0 弃用警告
@use './variables.scss' as *;

// 手机端 (< 768px)
@media (max-width: $breakpoint-sm - 1px) {
  .container {
    padding: 0 16px;
  }
  
  .sidebar {
    display: none;
  }
  
  .main-content {
    margin-left: 0;
  }
  
  .header {
    padding: 0 16px;
  }
}

// 平板端 (768px - 1023px)
@media (min-width: $breakpoint-sm) and (max-width: $breakpoint-md - 1px) {
  .container {
    padding: 0 24px;
  }
  
  .sidebar {
    width: 200px;
  }
  
  .main-content {
    margin-left: 200px;
  }
}

// 桌面端 (>= 1024px)
@media (min-width: $breakpoint-md) {
  .container {
    padding: 0 32px;
  }
  
  .sidebar {
    width: 250px;
  }
  
  .main-content {
    margin-left: 250px;
  }
}

// 大屏幕桌面端 (>= 1200px)
@media (min-width: $breakpoint-lg) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

// 超大屏幕桌面端 (>= 1920px)
@media (min-width: $breakpoint-xl) {
  .container {
    max-width: 1600px;
  }
}

// 通用响应式工具类
.text-center-sm {
  text-align: center;
  
  @media (min-width: $breakpoint-sm) {
    text-align: left;
  }
}

.display-block-sm {
  display: block;
  
  @media (min-width: $breakpoint-sm) {
    display: inline-block;
  }
}

.hidden-sm {
  display: none;
  
  @media (min-width: $breakpoint-sm) {
    display: block;
  }
}

.visible-sm {
  display: block;
  
  @media (min-width: $breakpoint-sm) {
    display: none;
  }
}
