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

// 断点定义 deprecated
$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),
  'pad_v-pc_s': (841px, 1680px),
  // pc
  'pc': (1441px, 1920px),
  'pc_s': (1441px, 1680px),
  '<=pc_s': (0, 1680px),
  '>pc_s': 1681px,
  'pc_l': (1681px, 1920px),
  '>pc': 1921px,
  'laptop-pc_s': (1201px, 1680px)
);

// 断点定义 deprecated
@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;
    }
  }
}

// 断点定义 V2
$o-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, 1680px),
  '<=laptop': (0, 1680px),
  '>laptop': 1681px,
  'pad-laptop': (601px, 1680px),
  'pad_v-laptop': (841px, 1680px),
  'laptop_s': (1201px, 1440px),
  '<=laptop_s': (0, 1440px),
  '>laptop_l': 1441px,
  // pc
  'pc': (1680px, 1920px),
  '>pc': 1921px
);
@mixin respond($breakname) {
  $bp: map.get($o-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);
  }
}

@mixin x-svg-hover() {
  & {
    overflow: hidden;
  }

  svg {
    transition: all var(--o-duration-m1) var(--o-easing-standard-in);
  }

  @include hover {
    svg {
      transform: rotate(180deg);
    }
  }
}