@mixin generate-helper-classes($className,$interval, $propertyName, $type) {
    /* creates classes like
      p-5{ padding: 5px;}
      className-(1,5,10,15...) { propertyName: (1,5,10,15...)type}
    */
    @for $i from 0 through 50 {
        @if $i % $interval == 0 {
            .#{$className}#{$i} {
                #{$propertyName}: #{$i}#{$type};
            }
        }
    }
}

@mixin clearUlStyle() {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

@mixin generateButtons($collection) {
    @each $color, $colorVariable in $collection {
      .btn-#{$color}{
        /* button-variant(text, background, border) */
        @include button-variant(map-get($foregroundColors, $color),   $colorVariable,  $colorVariable);

        &.selected {
          @include button-variant(
            map-get($foregroundColors, map-get($selectedColors, $color)), 
            map-get($backgroundColors, map-get($selectedColors, $color)), 
            map-get($foregroundColors, map-get($selectedColors, $color))
          );
        }
      }
    }
}
@mixin defaultBackgroundWithForeground($color){
    background-color: #{map-get($backgroundColors, $color)};
    color: #{map-get($foregroundColors, $color)};
}

@mixin generateBackgrounds($selector, $property, $collection) {
    @each $color, $colorVariable in $collection {
      .#{$selector}-#{$color}{
        @if($selector == 'border' ){
          border: 1px solid #{$colorVariable};
        }
        @if($selector == 'background' ){
          @include defaultBackgroundWithForeground($color)
        }
        @else{
          #{$property}: #{$colorVariable};
        }
      }
    }
}

@mixin translationDelay($start, $interval, $number){
	    @for $i from 1 through $number {

					&:nth-of-type(#{$i}){
						transition-delay:#{1 + ($i * $interval)}s;
						-webkit-transition-delay:#{ 1+ ($i * $interval)}s;
					}
	    }

	}