@import "./variables.scss";

@mixin flex($just-content, $align-items, $flow: row, $wrap: nowrap) {
  display: flex;
  justify-content: $just-content;
  align-items: $align-items;
  flex-flow: $flow $wrap;
}

@mixin text-overflow() {
  white-space: nowrap;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin multi-line-ellipsis($line: 2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

@mixin card() {
  background: $white;
  border-radius: $radius;
  box-shadow: $shadow-long;
}

@mixin h0 {
  font-size: $font-h0;
  font-weight: $medium;
}

@mixin h1 {
  font-size: $font-h1;
  font-weight: $regular;
}

@mixin h2 {
  font-size: $font-h2;
  font-weight: $regular;
}

@mixin h3 {
  font-size: $font-h3;
  font-weight: $regular;
}

@mixin h4($weight: $regular) {
  font-size: $font-h4;
  font-weight: $weight;
}

@mixin h5($weight: $regular) {
  font-size: $font-h5;
  font-weight: $weight;
}

@mixin p1($weight: $regular) {
  font-size: $font-normal;
  font-weight: $weight;
}

@mixin p2($weight: $regular) {
  font-size: $font-small;
  font-weight: $weight;
}

@mixin p5($weight: $regular) {
  font-size: $font-h5;
  font-weight: $weight;
}

@mixin region-header($textColor: $black, $h5Color: $black) {
  text-align: center;
  color: $textColor;

  h4 {
    @include h4;
    word-break: break-all;
    opacity: 0.6;
  }

  h1 {
    @include h1;
    word-break: break-all;
    margin-top: 1rem;
  }

  h5 {
    color: $h5Color;
    @include h5;
    word-break: break-all;
    margin-top: 1rem;
  }
}

@mixin logo-wall-image {
  img {
    max-height: 6.25rem;
    display: block;
    margin: auto;
  }
}

@mixin link-arrow($textColor: $blue) {
  display: inline-block;
  &,
  &:hover {
    color: $textColor;
  }

  i {
    float: right;
    margin-left: 0.25rem;
    transition: all 0.2s;
  }

  &:hover i {
    transform: translateX(0.5rem);
  }
}

@mixin border-radius($radius-size: $radius) {
  overflow: hidden;
  border-radius: $radius-size;
}

@mixin transition($property: all, $duration: 250ms) {
  transition: $property $duration;
}

@mixin on-desktop($min-width: $mobile + 1) {
  @media screen and (min-width: $min-width) {
    @content;
  }
}

@mixin on-mobile($max-width: $mobile) {
  @media screen and (max-width: $max-width) {
    @content;
  }
}

@mixin box-shadow($offset-x: 0, $offset-y: 4px, $blur-radius: 4px, $spread-radius: 0, $color: rgb(0 0 0 / 4%)) {
  /* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: $offset-x $offset-y $blur-radius $spread-radius $color;
}