// RESPONSIVE

$bp-large: 1024px;
$bp-medium: 768px;
$bp-small: 481px;

@mixin bp($point) {
  @if $point == large {
    @media only screen and (min-width: $bp-large) {
      @content;
    }
  }
  @if $point == medium {
    @media only screen and (min-width: $bp-medium) {
      @content;
    }
  } @else if $point == small {
    @media only screen and (min-width: $bp-small) {
      @content;
    }
  }
}

@mixin max-width-bp($point) {
  @if $point == medium {
    @media only screen and (max-width: $bp-medium) {
      @content;
    }
  } @else if $point == small {
    @media only screen and (max-width: $bp-small) {
      @content;
    }
  }
}

// COLORS
$red: #e53935;
$white: #fff;
$blue: #1875d1;
$blue-light: #baddfa;
$green: #2ab371;
$gray: #666;
$dark-gray: #505050;
$darkest-gray: #404040;
$grey: #ebebeb; // yes, we went there
$gray-lesslight: #e5e5e5;
$gray-light: #eeeeee;
$gray-xlight: #f5f5f5;

$color-bg: $white;
$color-text: $dark-gray;
$color-headings: $darkest-gray;
$color-link: $blue;
$color-success: $green;

// FONTS
$font-headings: 'Roboto', sans-serif;
$font-base: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
  'Helvetica Neue', Arial, sans-serif;
$font-tiny: 12px;
$font-small: 16px;
$font-normal: 18px;
$font-large: 21px;
$font-xlarge: 30px;
$font-xxlarge: 48px;
$font-xxxlarge: 58px;

// DIMENSIONS
$form-radius: 4px;

// DEBUG
@mixin debug-layout($color: black, $important: false) {
  @if $important {
    * {
      background: rgba($color, 0.05) !important;
    }
  } @else {
    * {
      background: rgba($color, 0.05);
    }
  }
}

@keyframes pulseOpacity {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
