@use 'sass:math';

/* Breakpoints */
$mobile-breakpoint: 800px;

// Viewport Sizes
$desktop-width: 1440px;
$desktop-height: 900px;

$mobile-width: 375px;
$mobile-height: 650px;

// Breakpoint
@mixin mobile {
  @media (max-width: #{$mobile-breakpoint}) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: #{$mobile-breakpoint}) {
    @content;
  }
}

@function mobile-vw($pixels, $base-vw: $mobile-width) {
  @return math.div($pixels * 100vw, $base-vw);
}

@function mobile-vh($pixels, $base-vh: $mobile-height) {
  @return math.div($pixels * 100vh, $base-vh);
}

@function desktop-vw($pixels, $base-vw: $desktop-width) {
  @return math.div($pixels * 100vw, $base-vw);
}

@function desktop-vh($pixels, $base-vh: $desktop-height) {
  @return math.div($pixels * 100vh, $base-vh);
}

@function columns($columns) {
  @return calc((#{$columns} * var(--layout-column-width)) + ((#{$columns} - 1) * var(--layout-columns-gap)));
}

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

@mixin reduced-motion {
  @media (prefers-reduced-motion: reduce) {
    @content;
  }
}
