@mixin animation(
  $name,
  $duration: 1s,
  $timing-function: ease,
  $delay: 0s,
  $iteration-count: 1,
  $direction: normal,
  $fill-mode: forwards
) {
  animation: {
    name: $name;
    duration: $duration;
    timing-function: $timing-function;
    delay: $delay;
    iteration-count: $iteration-count;
    direction: $direction;
    fill-mode: $fill-mode;
  }
}

@mixin p-base(
  $which: before,
  $top: 0,
  $left: 0,
  $content: "",
  $position: absolute,
  $width: 100%,
  $height: 100%,
  $display: block
) {
  &::#{$which} {
    display: $display;
    content: $content;
    position: $position;
    top: $top;
    left: $left;
    width: $width;
    height: $height;
    @content;
  }
}
