_variables.scss

$ssb-green-1: #ecfeed;
$ssb-green-2: #b6e8b8;
$ssb-green-3: #1a9d49;
$ssb-green-4: #00824d;
$ssb-green-5: #075745;
$ssb-red-1: #fdede7;
$ssb-red-2: #ff896b;
$ssb-red-3: #dc3400;
$ssb-red-4: #cb3713;
$negative-red: #f8a67d;
$ssb-dark-1: #f0f8f9;
$ssb-dark-2: #c3dcdc;
$ssb-dark-3: #62919a;
$ssb-dark-4: #2d6975;
$ssb-dark-5: #274247;
$ssb-dark-6: #162327;
$ssb-white: #fff;
$ssb-purple-1: #f2f0ff;
$ssb-purple-3: #9272fc;
$ssb-blue-3: #3396d2;
$scrollbar-color: #b0b0b0;

$mobile-screen: 576px;
$tablet-screen: 768px;
$desktop-screen: 992px;

$mobile: 'screen and (max-width: 767px)';
$tablet: 'screen and (min-width: 768px) and (max-width: 991px)';
$desktop: 'screen and (min-width: 992px)';

// Use media queries like this:
//@media #{$mobile} { @content }

$input-field-height: 44px;
$global-padding-size: 8px;
$max-content-size: 1200px;
$max-readable-width: 580px;

@mixin roboto {
  font-family: 'Roboto', sans-serif !important;
  font-stretch: normal;
  font-weight: normal;
}

@mixin roboto-condenced {
  font-family: 'Roboto Condensed', sans-serif !important;
  font-stretch: condensed;
  font-weight: bold;
}

@mixin open-sans {
  font-family: 'Open Sans', sans-serif !important;
  font-stretch: normal;
  font-weight: normal;
}

@mixin focus-ring {
  outline: $ssb-purple-3 solid 2px;
  outline-offset: 2px;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@mixin reset-button {
  background-color: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  text-align: left;
}