@mixin preonize($name, $prop, $map, $breakpoints) {
  @each $label, $value in $map {
    .#{$name}#{"" + $label} {
      #{$prop}: $value;
    }
  }

  @each $breakpoint, $breakpoint-value in $breakpoints {
    @media only screen and (min-width: #{$breakpoint-value}) {
      @each $label, $value in $map {
        .#{$name}#{"" + $label}-#{$breakpoint} {
          #{$prop}: $value;
        }
      }
    }
  }
}

@mixin preonize-hover($name, $prop, $map, $breakpoints) {
  @each $label, $value in $map {
    .#{$name}#{"" + $label}:hover {
      #{$prop}: $value;
    }
  }

  @each $breakpoint, $breakpoint-value in $breakpoints {
    @media only screen and (min-width: #{$breakpoint-value}) {
      @each $label, $value in $map {
        .#{$name}#{"" + $label}-#{$breakpoint}:hover {
          #{$prop}: $value;
        }
      }
    }
  }
}

@mixin preonize-after($name, $prop, $map, $breakpoints) {
  @each $label, $value in $map {
    .#{$name}#{"" + $label}:after {
      content: "";
      #{$prop}: $value;
    }
  }

  @each $breakpoint, $breakpoint-value in $breakpoints {
    @media only screen and (min-width: #{$breakpoint-value}) {
      @each $label, $value in $map {
        .#{$name}#{"" + $label}-#{$breakpoint}:after {
          content: "";
          #{$prop}: $value;
        }
      }
    }
  }
}

@mixin preonize-before($name, $prop, $map, $breakpoints) {
  @each $label, $value in $map {
    .#{$name}#{"" + $label}:before {
      content: "";
      #{$prop}: $value;
    }
  }

  @each $breakpoint, $breakpoint-value in $breakpoints {
    @media only screen and (min-width: #{$breakpoint-value}) {
      @each $label, $value in $map {
        .#{$name}#{"" + $label}-#{$breakpoint}:before {
          content: "";
          #{$prop}: $value;
        }
      }
    }
  }
}

@function map-collect($maps...) {
  $collection: ();

  @each $map in $maps {
    $collection: map-merge($collection, $map);
  }

  @return $collection;
}