@use "./variables.scss" as v;

// MIXIN BREAKPOINTS
@mixin aboveXSmall {
  @media (min-width: v.$breakpoint-xsm) {
    @content;
  }
}

@mixin aboveSmall {
  @media (min-width: v.$breakpoint-sm) {
    @content;
  }
}

@mixin aboveMedium {
  @media (min-width: v.$breakpoint-md) {
    @content;
  }
}

@mixin aboveLarge {
  @media (min-width: v.$breakpoint-lg) {
    @content;
  }
}

@mixin aboveXLarge {
  @media (min-width: v.$breakpoint-xlg) {
    @content;
  }
}

@mixin belowSmall {
  @media (max-width: #{v.$breakpoint-sm - 1}) {
    @content;
  }
}

@mixin belowMedium {
  @media (max-width: #{v.$breakpoint-md - 1}) {
    @content;
  }
}

@mixin belowLarge {
  @media (max-width: #{v.$breakpoint-lg - 1}) {
    @content;
  }
}

@mixin belowXLarge {
  @media (max-width: #{v.$breakpoint-xlg - 1}) {
    @content;
  }
}

@mixin container {
  & {
    width: 100%;
    max-width: v.$container-size;
    margin: 0 auto;
    padding: 0 24px;
  }

  @include aboveLarge() {
    padding: 0 16px;
  }
}