/**
 * Imported ionic mixins for SCSS from different components
 * ----------------------------------------------------------------------------
 * Extracted from
 * https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/grid/grid.mixins.scss
 * https://github.com/ionic-team/ionic-framework/blob/master/core/src/components/item/item.mixins.scss
 */

// Responsive Mixins
// --------------------------------------------------


// Creates a fixed width for the grid based on the screen size
// ---------------------------------------------------------------------------------

@mixin make-grid-widths($widths: $grid-widths, $breakpoints: $screen-breakpoints) {
  @each $breakpoint, $width in $widths {
    @include media-breakpoint-up($breakpoint, $breakpoints) {
      width: $width;
    }
  }

  max-width: 100%;
}


// Adds padding to the element based on breakpoints
// ---------------------------------------------------------------------------------

@mixin make-breakpoint-padding($paddings) {
  @each $breakpoint in map-keys($paddings) {
    @include media-breakpoint-up($breakpoint) {
      $padding: map-get($paddings, $breakpoint);

      @include padding($padding);
    }
  }
}


// Item Mixins
// --------------------------------------------------

@mixin item-push-svg-url($fill) {
  $item-detail-push-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$fill}'/></svg>";

  @include svg-background-image($item-detail-push-svg, true);
}