@import '../settings/breakpoints';

@mixin for-phone-only {
  @media screen and (max-width: 767px) {
    @content;
  }
}

@mixin for-tablet-portrait-up {
  @media screen and (min-width: map_get($breakpoints, 'tablet-portrait')) {
    @content;
  }
}

@mixin for-tablet-portrait-only {
  @media screen and (min-width: map_get($breakpoints, 'tablet-portrait')) and (max-width: map_get($breakpoints, 'tablet-landscape')-1) {
    @content;
  }
}

@mixin for-tablet-landscape-up {
  @media screen and (min-width: map_get($breakpoints, 'tablet-landscape')) {
    @content;
  }
}

@mixin for-tablet-landscape-only {
  @media screen and (min-width: map_get($breakpoints, 'tablet-landscape')) and (max-width: map_get($breakpoints, 'desktop')-1) {
    @content;
  }
}

@mixin for-desktop-up {
  @media screen and (min-width: map_get($breakpoints, 'desktop')) {
    @content;
  }
}

@mixin for-big-desktop-up {
  @media screen and (min-width: map_get($breakpoints, 'big-desktop')) {
    @content;
  }
}