@use './Breakpoints.scss' as bp;

// Desktop
/// ...
@mixin desktop () {
  @media only screen and (width >= #{bp.$desktop-bp}) {
    @content;
  }
}

/// ...
@mixin desktop_container ($name) {
  @container #{$name} (width >= #{bp.$desktop-bp}) {
    @content;
  }
}

// Landscape
/// ...
@mixin landscape () {
  @media only screen and (width >= #{bp.$landscape-bp}) and (width < #{bp.$desktop-bp}) {
    @content;
  }
}

/// ...
@mixin landscapeOrSmaller () {
  @media only screen and (width < #{bp.$desktop-bp}) {
    @content;
  }
}

/// ...
@mixin landscapeOrSmaller_container ($name) {
  @container #{$name} (width < #{bp.$desktop-bp}) {
    @content;
  }
}

/// ...
@mixin landscapeOrBigger () {
  @media only screen and (width >= #{bp.$landscape-bp}) {
    @content;
  }
}

/// ...
@mixin landscapeOrBigger_container ($name) {
  @container #{$name} (width >= #{bp.$landscape-bp}) {
    @content;
  }
}

// Portrait
/// ...
@mixin portrait () {
  @media only screen and (width >= #{bp.$portrait-bp}) and (width < #{bp.$landscape-bp}) {
    @content;
  }
}
/// ...
@mixin portraitOrSmaller () {
  @media only screen and (width < #{bp.$landscape-bp}) {
    @content;
  }
}
/// ...
@mixin portraitOrSmaller_container ($name) {
  @container #{$name} (width < #{bp.$landscape-bp}) {
    @content;
  }
}

/// ...
@mixin portraitOrBigger () {
  @media only screen and (width >= #{bp.$portrait-bp}) {
    @content;
  }
}

/// ...
@mixin portraitOrBigger_container ($name) {
  @container #{$name} (width >= #{bp.$portrait-bp}) {
    @content;
  }
}

// Landscape
/// ...
@mixin mobile () {
  @media only screen and (width >= #{bp.$mobile-bp}) and (width < #{bp.$portrait-bp}) {
    @content;
  }
}


/// ...
@mixin mobile_container ($name) {
  @container #{$name} (width < #{bp.$portrait-bp}) {
    @content;
  }
}

// Combinations
/// ...
@mixin portraitAndLandscape () {
  @media only screen and (width >= #{bp.$portrait-bp}) and (width < #{bp.$desktop-bp}) {
    @content;
  }
}