@use '../variables' as *;

// ---- Responsive

@mixin until($size, $media-type: screen) {
  @media #{$media-type} and (max-width: #{cat-token('size.screen.#{$size}') - 1px}) {
    @content;
  }
}

@mixin from($size, $media-type: screen) {
  @media #{$media-type} and (min-width: #{cat-token('size.screen.#{$size}')}) {
    @content;
  }
}

// ---- Print

@mixin print {
  @media print {
    @content;
  }
}

// ---- Interaction

@mixin pointer($pointer: fine) {
  @media (pointer: #{$pointer}) {
    @content;
  }
}

@mixin hover($hover: hover) {
  @media (hover: #{$hover}) {
    @content;
  }
}