@use "sass:map";
@use "sass:string";

@use "../function/base" as *;

$sm: 640px !default;
$md: 768px !default;
$lg: 1024px !default;
$xl: 1280px !default;
$xxl: 1536px !default;

@mixin screen($bp) {
  $breakpoint: $bp;

  @if (string.index(#{$bp}, "m") != 1) {
    $breakpoint: "min-width: #{unit($bp)}";
  }

  @if (&) {
    @media (#{$breakpoint}) {
      @content;
    }
  } @else {
    @at-root {
      @media (#{$breakpoint}) {
        @content;
      }
    }
  }
}

@mixin max-width-screen($val) {
  @include screen("max-width: #{unit($val)}") {
    @content;
  }
}

@mixin min-width-screen($val) {
  @include screen("min-width: #{unit($val)}") {
    @content;
  }
}

@mixin xs() {
  @include max-width-screen($sm - 1) {
    @content;
  }
}

@mixin md() {
  @include min-width-screen($md) {
    @content;
  }
}

@mixin lg() {
  @include min-width-screen($lg) {
    @content;
  }
}

@mixin xl() {
  @include min-width-screen($xl) {
    @content;
  }
}

@mixin xxl() {
  @include min-width-screen($xxl) {
    @content;
  }
}