@use 'sass:meta';
@use 'sass:list';
@use 'sass:map';

// 一级标题
@mixin h1 {
  font-size: 32px;
  line-height: 44px;
}

// 二级标题
@mixin h2 {
  font-size: 28px;
  line-height: 40px;
}

// 三级标题
@mixin h3 {
  font-size: 24px;
  line-height: 32px;
}
// 四级标题
@mixin h4 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}

// 正文
@mixin text1 {
  font-size: 16px;
  line-height: 24px;
}

// 小标题
@mixin text2 {
  font-size: 14px;
  line-height: 20px;
}
// 小小标题
@mixin text2 {
  font-size: 12px;
  line-height: 18px;
}
@mixin tip1 {
  font-size: 14px;
  line-height: 22px;
}

// 提示文本2
@mixin tip2 {
  font-size: 12px;
  line-height: 18px;
}
// 断点定义
$breakpoints: (
  // phone
        'phone': (0, 600px),
        '>phone': 601px,
  // pad
        'pad': (601px, 1200px),
        '<=pad': (0, 1200px),
        '>pad': 1201px,
  // pad-v
        'pad_v': (601px, 840px),
        '<=pad_v': (0, 840px),
        '>pad_v': 841px,
  // pad-h
        'pad_h': (841px, 1200px),
  // laptop
        'laptop': (1201px, 1440px),
        '<=laptop': (0, 1440px),
        '>laptop': 1441px,
        'pad-laptop': (601px, 1440px),
        'pad_v-laptop': (841px, 1440px)
);

@mixin respond-to($breakname) {
  $bp: map.get($breakpoints, $breakname);
  @if meta.type-of($bp) == 'list' {
    $min: list.nth($bp, 1);
    $max: list.nth($bp, 2);
    @if $min == 0 {
      @media (max-width: $max) {
        @content;
      }
    } @else {
      @media (min-width: $min) and (max-width: $max) {
        @content;
      }
    }
  } @else {
    @media (min-width: $bp) {
      @content;
    }
  }
}

@mixin hoverable($hover: hover) {
  @media (hover: $hover) {
    @content;
  }
}

@mixin hover() {
  @media (hover: hover) {
    &:hover {
      @content;
    }
  }
}

@mixin me-hover() {
  @content;
  @media (hover: hover) {
    &:hover {
      @content;
    }
  }
}

@mixin x-hover() {
  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
  @include hover {
    transform: rotate(180deg);
  }
}