@import 'variables';

@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);

  max-height: 0 #{$important};
  opacity: 0 #{$important};
  visibility: hidden #{$important};
  transition: $default-transition;
}

@mixin element-invisible-off($value-visibility: 100px, $enforce: true) {
  $important: if($enforce, '!important', null);

  max-height: #{$value-visibility} #{$important};
  opacity: 1 #{$important};
  visibility: visible #{$important};
}

@mixin pseudo-element(
  $element,
  $el-height: 0,
  $el-width: 0,
  $isCentered: false,
  $el-background: transparent,
  $el-rotation: 0deg,
  $el-transition: none,
  $isVisible: true
) {
  @if $element == 'before' or $element == 'after' {
    position: relative;

    &:#{$element} {
      @extend %content;

      width: #{$el-width};
      height: #{$el-height};
      background: #{$el-background};
      transition: #{$el-transition};
      @content;

      @if $isVisible {
        @include element-invisible-off;
      } @else {
        @include element-invisible;
      }

      @if $isCentered {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(#{$el-rotation});
      } @else {
        transform: rotate(#{$el-rotation});
        @content;
      }
    }
  } @else {
    @warn "`#{$el}` isn't a valid pseudo element";
  }
}

@mixin css-triangle(
  $pseudo,
  $triangle-size,
  $triangle-color,
  $triangle-direction
) {
  @include pseudo-element(#{$pseudo}) {
    border-style: solid;
    border-width: $triangle-size;
    @content;

    border-#{$triangle-direction}-width: 0;
    border-color: if($triangle-direction == down, $triangle-color, transparent)
      if($triangle-direction == left, $triangle-color, transparent)
      if($triangle-direction == up, $triangle-color, transparent)
      if($triangle-direction == right, $triangle-color, transparent);
  }
}

@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (max-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @error "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}