$blue-button-gradient: linear-gradient(100deg, #82c5ff, #40a6ff);
$blue-btn-shadow: 0 4px 6px 0 rgba(57, 152, 235, 0.38);
$shadow_grey: 0 15px 18px 0 rgba(0, 0, 0, 0.05);
$shadow_select: 1px 1px 10px 0 rgba(0, 0, 0, 0.07);

$error-height: 30px;

$galleryTransitionFunction: all 700ms cubic-bezier(0.33, -0.05, 0.21, 1.04);

@mixin galleryActiveTransition($opacity) {
  opacity: $opacity;
  transition: $galleryTransitionFunction;
}

$bold: 800;
$medium: 600;
$regular: 400;

$headerHeight: 80px;
$headerHeightMobile: 58px;
$headerWithSearchBarHeightMobile: 123px;
$galleryHeight: 65vh;
$galleryMargin: 15px;
$togglersHeight: 48px;

$tablet: 600px;
$headerBP: 800px;
$desktop: 1100px;
$graphsBP: 1200px;
$large: 1800px;

@mixin min-height {
  min-height: calc(100vh - 105px); // 100vh - minimal footer height
}

@mixin galleryImageHeight {
  height: 250px;
  @media screen and (min-width: $tablet) {
    height: 370px;
  }
  @media screen and (min-width: $desktop) {
    height: 500px;
  }
  @media screen and (min-width: $large) {
    height: 600px;
  }
  @media screen and (min-width: 2500px) {
    height: 700px;
  }
  @media screen and (min-width: 3000px) {
    height: 800px;
  }
  @media screen and (min-width: 4000px) {
    height: 900px;
  }
}

@mixin main-padding {
  padding-left: 5vw;
  padding-right: 5vw;

  @media screen and (min-width: 2000px) {
    padding-left: 7vw;
    padding-right: 7vw;
  }

  @media screen and (min-width: 2200px) {
    padding-left: 10vw;
    padding-right: 10vw;
  }
}

@mixin font_supertiny() {
  font-size: 9px;
  @media screen and (min-width: 400px) {
    font-size: 10px;
  }
  @media screen and (min-width: $tablet) {
    font-size: 14px;
  }
  @media screen and (min-width: $large) {
    font-size: 18px;
  }
}

@mixin font_tiny() {
  font-size: 12px;
  @media screen and (min-width: $tablet) {
    font-size: 14px;
  }
}

@mixin font_menu() {
  font-size: 14px;
  @media screen and (min-width: 1250px) {
    font-size: 16px;
  }
}

@mixin font_main() {
  font-size: 14px;
  @media screen and (min-width: $tablet) {
    font-size: 16px;
  }
  @media screen and (min-width: $large) {
    font-size: 18px;
  }
}

@mixin font_input() {
  font-size: 16px;
}

@mixin font_large_input() {
  font-size: 16px;
  @media screen and (min-width: $desktop) {
    font-size: 18px;
  }
  @media screen and (min-width: $large) {
    font-size: 22px;
  }
}

@mixin font_subheading() {
  font-size: 16px;
  @media screen and (min-width: $tablet) {
    font-size: 18px;
  }
  @media screen and (min-width: $large) {
    font-size: 22px;
  }
}

@mixin font_heading() {
  font-size: 18px;
  @media screen and (min-width: $tablet) {
    font-size: 32px;
  }
  @media screen and (min-width: $desktop) {
    font-size: 36px;
  }
}

@mixin font_huge() {
  font-size: 22px;
  @media screen and (min-width: $tablet) {
    font-size: 36px;
  }
  @media screen and (min-width: $desktop) {
    font-size: 44px;
  }
  @media screen and (min-width: $large) {
    font-size: 52px;
  }
}

@mixin multiLineEllipsis($lineHeight: 30px, $lineCount: 3, $bgColor: #fff) {
  overflow: hidden;
  position: relative;
  line-height: $lineHeight;
  max-height: $lineHeight * $lineCount;

  &:before {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
    background: $bgColor;
    padding: 0 5px;
    width: 50px;
    text-align: right;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 50%,
      rgba(255, 255, 255, 1) 100%
    );
  }
  &:after {
    content: '';
    position: absolute;
    right: 0;
    width: 23px;
    height: $lineHeight;
    margin-top: 0.2em;
    background: $bgColor;
  }
}