@mixin window-style-modal($background: var(--color-white), $shadow: hsla(212, 7%, 55%, 0.19)) {
  box-shadow: 0 0 8px 0 $shadow;
  background-color: $background;
}

@mixin breakpoint($min: 0, $max: 0) {
  $type: type-of($min);

  @if $type==string {
    @if $min==xs {
      @media (max-width: 768px) {
        @content;
      }
    }

    @else if $min==sm {
      @media (max-width: 1024px) {
        @content;
      }
    }

    @else if $min==md {
      @media (max-width: 1200px) {
        @content;
      }
    }

    @else if $min==lg {
      @media (min-width: 1201px) {
        @content;
      }
    }

    @else {
      @warn "Beware ! Breakpoints mixin supports xs, sm, md, lg";
    }
  }

  @else if $type==number {
    $query: "all" !default;

    @if $min !=0 and $max !=0 {
      $query: "(min-width: #{$min}) and (max-width: #{$max})";
    }

    @else if $min !=0 and $max==0 {
      $query: "(min-width: #{$min})";
    }

    @else if $min==0 and $max !=0 {
      $query: "(max-width: #{$max});"
    }

    @media #{$query} {
      @content;
    }
  }
}