$color-background-text: whitesmoke;
$bloomeBackGroundColor:#5f249f;//#1b75bb;
$color-border: #747c83;
$color-black: #000;
$color-white-smoke: whitesmoke;
$color-white: #ffffff;
$color-text: #6a696a;
$color-yellow: #ffff10;
$dxc-purple: #5f249f;
$font-path: "../fonts" !default;
// $font-family: "Roboto", sans-serif;
$font-family-regular: "SourceSansProRegular";
$font-family-light: "SourceSansPro-Light";
$font-family-semibold: "SourceSansPro-Semibold";
$font-family-black: "SourceSansPro-Black";
$font-family-bold: "SourceSansPro Bold";
$font-family: "Open Sans";
// Typography
$font-h1: 66px;
$font-h2: 49px;
$font-h3: 37px;
$font-h4: 28px;
$font-h5: 20px;
$font-default: 15px;
$font-14: 14px;
$font-16: 16px;
$font-18: 18px;
$blue: #0067b3;
$gray: #e0e0e0;
$gray-dark: #4f4f4f;
$green: #41ce50;
$white: #ffffff;
$white-gray: #f8f8f8;
$yellow: #b7f848;
$violet: #b399ff;
$cyan: #7df3ee;
$red: #e42b07;
$black: #000000;
$grey: #dcdcdc;
$purple:$bloomeBackGroundColor;// #5f249f;
$bloomcolor: #1B75BB;
$purple-gray: #f5ebf9;
$border: $gray;
// Colors
$primary: $white-gray !default;
$color-title: $gray !default;
$text-gray: $gray-dark !default;
//Button
$btn-border-width: 1px;
//Background
$bg-primary: $primary !default;
//Space
$distance: 8px;
//border
$border-gray: 1px solid $border !default;
$shadow: 0 2px 6px 0 rgba(222, 222, 222, 0.5);

@mixin common-border {
  border: 1px solid !important;
}

// responsive
$breakpoints: (
  "mobile": (
    max-width: 500px,
  ),
  "mobile-big": (
    max-width: 576px,
  ),
  "tablet": (
    max-width: 767px,
  ),
  "tablet-big": (
    max-width: 1024px,
  ),
  "desktop": (
    min-width: 1025px,
  ),
) !default;

@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media #{inspect(map-get($breakpoints, $breakpoint))} {
      @content;
    }
  }
}

$breakpoints-between: (
  "xxs": 350px,
  "xs": 500px,
  "sm": 768px,
  "md": 992px,
  "lg": 1024px,
  "xl": 1200px,
  "xxl": 1400px,
) !default;

@mixin respond-between($lower, $upper) {
  @if map-has-key($breakpoints-between, $lower) and
    map-has-key($breakpoints-between, $upper)
  {
    $lower-breakpoint: map-get($breakpoints-between, $lower);
    $upper-breakpoint: map-get($breakpoints-between, $upper);

    @media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
      @content;
    }
  }
}

//Custom scrollbar
@mixin custom-scrollbar {
  /* width */
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: $gray !important;
    border-radius: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 1px;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background-color: $gray !important;
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background-color: $gray !important;
  }
}