$grey: #f2f2f2;
$grey-dark: #999;
$grey-background: #f8f8f9;

$white: #fff;
$black: #000;
$text-blue: #405995;


$text-color: #333333;
$green: #90be0d;
$yellow: #ffdf00;
$green-opacity: #8fbe0d23;
$orange: #FF3300;

%flex-centered {
  display: flex;
  justify-content: center;
  align-items: center;
}

%scrollbar {
  scrollbar-color: $grey-dark $grey;
  scrollbar-width: thin;
  &::-webkit-scrollbar {
    width: 7px;
    height: 5px;
  }
  &::-webkit-scrollbar-track-piece {
    background-color: $grey;
  }
  &::-webkit-scrollbar-thumb {
    height: 1px;
    background-color: $grey-dark;
    border-radius: 3px;
  }
}


@mixin columns($values...) {
  @each $var in $values {
    grid-template-columns: #{$var};
  }
}

@mixin box-shadow() {
  box-shadow: 0 0 79px 0 rgba(0, 0, 0, 0.13);
  background: $white;
}


// This file is attached to every vue component for using variables and rules.
// For configuration see more in vue.config.js

$container-width: 1140;