@use "sass:list";
@use "sass:map";

// 响应式断点：xs < 40rem，sm 40rem~47.99875rem，md 48rem~63.99875rem，
// lg 64rem~79.99875rem，xl 80rem~95.99875rem，xxl >= 96rem。
$media-breakpoints: (
  "xs": 0,
  "sm": 40rem,
  "md": 48rem,
  "lg": 64rem,
  "xl": 80rem,
  "xxl": 96rem,
) !default;

@function media-breakpoint($name) {
  $value: map.get($media-breakpoints, $name);
  @if $value == null {
    @error "[mvframe media] Unknown breakpoint `#{$name}`. Available: #{map.keys($media-breakpoints)}";
  }
  @return $value;
}

@function media-next($name) {
  $keys: map.keys($media-breakpoints);
  $index: list.index($keys, $name);

  @if $index == null {
    @error "[mvframe media] Unknown breakpoint `#{$name}`. Available: #{$keys}";
  }
  @if $index == list.length($keys) {
    @return null;
  }
  @return list.nth($keys, $index + 1);
}

@function media-range-max($name) {
  $next: media-next($name);
  @if $next == null {
    @return null;
  }
  @return calc(#{media-breakpoint($next)} - 0.02px);
}

@mixin media-up($name) {
  $min: media-breakpoint($name);
  @if $min == 0 {
    @content;
  } @else {
    @media (min-width: #{$min}) {
      @content;
    }
  }
}

@mixin media-down($name) {
  $max: media-range-max($name);
  @if $max == null {
    @content;
  } @else {
    @media (max-width: #{$max}) {
      @content;
    }
  }
}

@mixin media-only($name) {
  $min: media-breakpoint($name);
  $max: media-range-max($name);

  @if $min == 0 and $max == null {
    @content;
  } @else if $min == 0 {
    @media (max-width: #{$max}) {
      @content;
    }
  } @else if $max == null {
    @media (min-width: #{$min}) {
      @content;
    }
  } @else {
    @media (min-width: #{$min}) and (max-width: #{$max}) {
      @content;
    }
  }
}

@mixin media-between($from, $to) {
  $keys: map.keys($media-breakpoints);
  $from-index: list.index($keys, $from);
  $to-index: list.index($keys, $to);

  @if $from-index == null or $to-index == null {
    @error "[mvframe media] Unknown breakpoint in `media-between(#{$from}, #{$to})`. Available: #{$keys}";
  }
  @if $from-index > $to-index {
    @error "[mvframe media] `media-between` expects `$from <= $to`, got `#{$from}` > `#{$to}`.";
  }

  $min: media-breakpoint($from);
  $max: media-range-max($to);

  @if $min == 0 and $max == null {
    @content;
  } @else if $min == 0 {
    @media (max-width: #{$max}) {
      @content;
    }
  } @else if $max == null {
    @media (min-width: #{$min}) {
      @content;
    }
  } @else {
    @media (min-width: #{$min}) and (max-width: #{$max}) {
      @content;
    }
  }
}

// 发光阴影效果：::after 伪元素，可被 @include 复用
@mixin glow-shadow-after($css-var) {
  position: relative;
  isolation: isolate;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    background-color: var(#{$css-var});
    transform: translateY(20%);
    pointer-events: none;
    filter: blur(0.625rem);
    z-index: -1;
  }
}
@mixin hover-box-shadow() {
  box-shadow: 0 0.5rem 0.5rem
    color-mix(in srgb, var(--color-body) 6%, rgba(0, 0, 0, 0.05));
}
