// Extra small screen / phone
$screen-phone: 320px;

$screen-normal-phone: 375px;

// Small screen / tablet
$screen-tablet: 768px;

// Large screen / wide desktop
$screen-desktop: 1024px;

// max desktop
$screen-xl: 1440px;

::export {
  $screen-phone: $screen-phone;
  $screen-tablet: $screen-tablet;
  $screen-desktop: $screen-desktop;
  $screen-xl: $screen-xl;
}

@mixin media-min-xl {
  @media screen and (min-width: $screen-xl + 1) {
    @content;
  }
}

@mixin media-min-lg {
  @media screen and (min-width: $screen-desktop + 1) {
    @content;
  }
}

@mixin media-min-md {
  @media screen and (min-width: $screen-tablet + 1) {
    @content;
  }
}

@mixin media-min-sm {
  @media screen and (min-width: $screen-normal-phone + 1) {
    @content;
  }
}

@mixin media-min-xs {
  @media screen and (min-width: $screen-phone) {
    @content;
  }
}

@mixin media-max-xl {
  @media screen and (max-width: $screen-xl) {
    @content;
  }
}

@mixin media-max-lg {
  @media screen and (max-width: $screen-desktop) {
    @content;
  }
}

@mixin media-max-md {
  @media screen and (max-width: $screen-tablet) {
    @content;
  }
}

@mixin media-max-sm {
  @media screen and (max-width: $screen-normal-phone) {
    @content;
  }
}

@mixin media-max-xs {
  @media screen and (max-width: $screen-phone) {
    @content;
  }
}

@mixin hidden-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  -webkit-appearance: none;

  &::-webkit-scrollbar {
    display: none;
  }
}