@use "sass:map";

// Colours
$white: #ffffff;
$grey: #222222;
$greyAlt: #2a2a2a;
$pink: #AD4A85;
$green: #4AAD72;
$gold: #ADA44A;
$offWhite: #f2f2f2;

// Fonts
$roboto: "Roboto", serif;
$poppins: "Poppins", sans-serif;

// Breakpoints
$widthBreakpoints: (
  '576': 576px,
  '768': 768px,
  '992': 992px,
  '1200': 1200px,
  '1400': 1400px
) !default;

$heightBreakpoints: (
  '650': 650px,
  '800': 800px
) !default;

// Modern screen-width mixin
@mixin screen-width($breakpoint) {
  @if map.has-key($widthBreakpoints, $breakpoint) {
    @media (min-width: map.get($widthBreakpoints, $breakpoint)) {
      @content;
    }
  }
}

// Modern small-screen mixin
@mixin small-screen($heightBreakpoint) {
  @if map.has-key($heightBreakpoints, $heightBreakpoint) {
    @media (max-height: map.get($heightBreakpoints, $heightBreakpoint)) {
      @content;
    }
  }
}