// Mixins
@mixin image_element($imgname, $add_hover: false) {
	@include icons-sprite($imgname);
	height: icons-sprite-height($imgname);
	width: icons-sprite-width($imgname);
	@if $add_hover {
		&:hover {
			@include icons-sprite($imgname+'_hover');
		}
	}
}

@mixin pseudoelem($imgname: false, $add_hover: false) {
	content: "";
	position: absolute;
	display: inline-block;
	left: 0;

	@if $imgname {
		@include image_element($imgname, $add_hover);
	}
}

// der Standard-Mixin von Compass ist kaputt... :/
@mixin box-shadow($shadow...) {
	-webkit-box-shadow: $shadow;
	-moz-box-shadow: $shadow;
	-ms-box-shadow: $shadow;
	-o-box-shadow: $shadow;
	box-shadow: $shadow;
}

@mixin border-box($padding_box: true) {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	@if $padding_box {
		-moz-background-clip: padding-box !important;
		-webkit-background-clip: padding-box !important;
		background-clip: padding-box !important;
	}
}

@mixin placeholder($color: #999) {
	color: $color;
	opacity: 1;
}

::-webkit-input-placeholder {
	@include placeholder($placeholder_color);
}
::-moz-placeholder {
	@include placeholder($placeholder_color);
}
:-ms-input-placeholder {
	@include placeholder($placeholder_color);
}
input:-moz-placeholder {
	@include placeholder($placeholder_color);
}

@mixin clearfix {
	&:after {
		display: table;
		content: "";
		clear: both;
	}
}

@mixin border-gradient {
  border: 2px solid $color-main;
  border-image: linear-gradient(to bottom, $color-main, $color-accent) 2 repeat;
}

@mixin background-gradient {
  background: linear-gradient(140deg, $color-main-contrast 0%, $color-accent-contrast 60%);
  color: $bg_white;
}

@mixin background-gradient-bright {
  background: linear-gradient(120deg, $bg_white 0%, $bright 60%);
}

@mixin greyscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

@mixin flexbox($columns: 2) {
  > * {
    margin-left: auto;
    margin-right: auto;
  }

  @media screen and (min-width: $break_medium) {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    > * {
      margin: 0 $gutter/2;

      @if $columns == 2 {
        width: calc(50% - #{$gutter/2});

        &:nth-of-type(2n-1) {
          margin-left: 0;
        }

        &:nth-of-type(2n) {
          margin-right: 0;
        }
      }

      @if $columns == 3 {
        width: calc(33.33% - #{2*$gutter/3});

        &:nth-of-type(3n-2) {
          margin-left: 0;
        }

        &:nth-of-type(3n) {
          margin-right: 0;
        }
      }
    }
  }
}

@mixin definitionlist($firstcol: 30%) {
  @include clearfix;

  dt,
  dd {
    padding-top: 3px;
    float: left;
  }

  dt {
    width: $firstcol;
    font-weight: bold;
    clear: both;
  }

  dd {
    width: 100% - $firstcol;
  }
}