@mixin display-flex($flex-dir: row, $align-items: null, $justify-content: null) {
  align-items: $align-items;
  display: flex;
  flex-direction: $flex-dir;
  justify-content: $justify-content;
}

@mixin arrow($direction: top, $size: 10px, $color: #ccc, $center: 50%, $border-color: #cfcfcf, $margin: 0) {
  position: relative;
  border-color: $border-color;

  &::before,
  &::after {
    border-color: $color;
    content: "";
    height: 0;
    position: absolute;
    width: 0;
    z-index: 2;

    @if $direction == "right" {
      border-bottom: $size solid transparent;
      border-left: $size solid $color;
      border-top: $size solid transparent;
      left: 100%;
      margin-left: $margin;
      margin-top: $size * -1;
      top: $center;
    }

    @else if $direction == "bottom" {
      border-left: $size solid transparent;
      border-right: $size solid transparent;
      border-top: $size solid $color;
      left: $center;
      margin-left: $size * -1;
      margin-top: $margin;
      top: 100%;
    }

    @else if $direction == "left" {
      border-bottom: $size solid transparent;
      border-right: $size solid $color;
      border-top: $size solid transparent;
      margin-right: $margin;
      margin-top: $size * -1;
      right: 100%;
      top: $center;
    }

    @else {
      border-bottom: $size solid $color;
      border-left: $size solid transparent;
      border-right: $size solid transparent;
      bottom: 100%;
      left: $center;
      margin-bottom: $margin;
      margin-left: $size * -1;
    }
  }

  &::after {
    z-index: 1;

    @if $direction == "right" {
      border-bottom: ($size + 1) solid transparent;
      border-left: ($size + 1) solid $border-color;
      border-top: ($size + 1) solid transparent;
      left: 100%;
      margin-left: $margin;
      margin-top: ($size + 1) * -1;
      top: $center;
    }

    @else if $direction == "bottom" {
      border-left: ($size + 1) solid transparent;
      border-right: ($size + 1) solid transparent;
      border-top: ($size + 1) solid $border-color;
      left: $center;
      margin-left: ($size + 1) * -1;
      margin-top: $margin;
      top: 100%;
    }

    @else if $direction == "left" {
      border-bottom: ($size + 1) solid transparent;
      border-right: ($size + 1) solid $border-color;
      border-top: ($size + 1) solid transparent;
      margin-right: $margin;
      margin-top: ($size + 1) * -1;
      right: 100%;
      top: $center;
    }

    @else {
      border-bottom: ($size + 1) solid $border-color;
      border-left: ($size + 1) solid transparent;
      border-right: ($size + 1) solid transparent;
      bottom: 100%;
      left: $center;
      margin-bottom: $margin;
      margin-left: ($size + 1) * -1;
    }
  }
}

@mixin center($dir: 'both') {
  position: absolute;

  @if $dir == 'v' {
    top: 50%;
    transform: scale(1) translate3d(0, -50%, 0);
  }

  @else if $dir == 'h' {
    left: 50%;
    transform: scale(1) translate3d(-50%, 0, 0);
  }

  @else {
    top: 50%;
    left: 50%;
    transform: scale(1) translate3d(-50%, -50%, 0);
  }
}

@mixin abs-overlay {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

@mixin s-overlay($color, $o: 1) {
  @include abs-overlay;

  background: rgba($color, $o);
}

@mixin ps-bg($img, $r: -205deg, $c1: null, $c1a: null, $c2: null, $c2a: null) {
  @if $c1 and $c1a and $c2 and $c2a {
    background: linear-gradient($r, rgba($c1, $c1a), rgba($c2, $c2a)), url($img) cover no-repeat center center;
  }

  @else {
    background: url($img) cover no-repeat center center;
  }
}

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

@mixin placeholder {
  &.placeholder {
    @content;
  }
}

@mixin pop {
  transition: all 0.4s cubic-bezier(0.3, 0, 0, 1.3);

  .no-animation & {
    transition: none;
  }
}

@mixin default-shadow {
  box-shadow: 0 2px 5px rgba(black, 0.2);
}

@mixin inset-border($color: rgba(black, 0.09), $highlight: $white, $dir: bottom) {
  padding: 0 1em 1em;

  &:not(:last-child) {
    border-#{$dir}: 1px solid $color;
    margin-#{$dir}: 1em;

    @if $dir == 'bottom' {
      box-shadow: 0 1px 0 $highlight;
    }
  }
}