@use 'sass:math';

/* Breakpoints */
$mobile-breakpoint: get('breakpoints.mobile');

// Viewport Sizes
$desktop-width: get('viewports.desktop.width');
$desktop-height: get('viewports.desktop.height');

$mobile-width: get('viewports.mobile.width');
$mobile-height: get('viewports.mobile.height');

// Breakpoint
@mixin mobile {
  @media (max-width: #{$mobile-breakpoint - 1px}) {
    @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);
}

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

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

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