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

@mixin element-invisible($enforce: true) {
  $important: if($enforce, "!important", null);

  position: absolute #{$important};
  width: 1px #{$important};
  height: 1px #{$important};
  padding: 0 #{$important};
  overflow: hidden #{$important};
  clip: rect(0, 0, 0, 0) #{$important};
  white-space: nowrap #{$important};
  border: 0 #{$important};
}

@mixin element-invisible-off($enforce: true) {
  $important: if($enforce, "!important", null);

  position: static #{$important};
  width: auto #{$important};
  height: auto #{$important};
  overflow: visible #{$important};
  clip: auto #{$important};
  white-space: normal #{$important};
}

@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: $triangle-size;

  @if $triangle-direction == down {
    border-bottom-width: 0;
    border-color: $triangle-color transparent transparent;
  }
  @if $triangle-direction == up {
    border-top-width: 0;
    border-color: transparent transparent $triangle-color;
  }
  @if $triangle-direction == right {
    border-right-width: 0;
    border-color: transparent transparent transparent $triangle-color;
  }
  @if $triangle-direction == left {
    border-left-width: 0;
    border-color: transparent $triangle-color transparent transparent;
  }
}