// Screensized variables
@import "screen_size.scss";

@mixin round($radius: 5px, $override: false) {
  border-radius: $radius if($override, !important, null);
  background-clip: padding-box;
}

@mixin drop-shadow($x: 0, $y: 0, $blur: 5px, $spread: 0, $alpha: 0.16) {
  box-shadow: $x $y $blur $spread rgba(54, 114, 216, $alpha);
}

@mixin inner-shadow($x: 0, $y: 0, $blur: 5px, $spread: 0, $alpha: 0.2) {
  box-shadow: inset $x $y $blur $spread rgba(0, 0, 0, $alpha);
}

@mixin gradient($from, $to) {
  background-color: $from;
  background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to));
  background-image: -webkit-linear-gradient(top, $from, $to);
  background-image: linear-gradient(to bottom, $from, $to);
}

@mixin box-shadow($top: 0px, $left: 0px, $blur: 5px, $color: rgba(0, 0, 0, 0.2), $inset: false) {
  @if $inset {
    box-shadow: inset $top $left $blur $color;
  } @else {
    box-shadow: $top $left $blur $color;
  }
}

@mixin text-shadow($x1: 2px, $y1: 2px, $blur1: 5px, $color1: black, $x2: null, $y2: null, $blur2: null, $color2: null) {
  @if ($x2) {
    text-shadow: $x1 $y1 $blur1 $color1, $x2 $y2 $blur2 $color2;
  } @else {
    text-shadow: $x1 $y1 $blur1 $color1;
  }
}

@mixin transition($property: all, $duration: 0.3s) {
  transition: $property $duration ease-in-out;
}

@mixin placeholder($color) {
  &::-webkit-input-placeholder {
    color: $color;
  }
  &:-moz-placeholder {
    color: $color;
  }
}

@mixin flexCenter($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  direction: $direction;
}

@mixin flexLeft($direction: row) {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  direction: $direction;
}

@mixin sm-screen {
  @media (max-width: $sm-screen-size) {
    @content;
  }
}

@mixin md-screen {
  @media (max-width: $md-screen-size) {
    @content;
  }
}

@mixin lg-screen {
  @media (max-width: $lg-screen-size) {
    @content;
  }
}

@mixin sm-single-column {
  @include sm-screen {
    grid-template-columns: repeat(1, 1fr);
  }
}

@mixin md-double-columns {
  @include md-screen {
    grid-template-columns: repeat(2, 1fr);
  }
}

@mixin lg-tripple-columns {
  @include lg-screen {
    grid-template-columns: repeat(3, 1fr);
  }
}

@mixin tablet {
  @media (min-width: $tablet_screen_size) {
    @content;
  }
}

@mixin tabletHorizontal {
  @media (min-width: $tablet_horizontal_screen_size) {
    @content;
  }
}

@mixin desktop {
  @media (min-width: $desktop_screen_size) {
    @content;
  }
}

@mixin largeScreen {
  @media (min-width: $large_screen_size) {
    @content;
  }
}
