@mixin out() {
  // for development and debugging only
  outline: 1px solid red;
}

@mixin bold() {
  font-weight: bold;
  font-weight: 600;
}

@mixin inline() {
  display: inline;
  margin: 0;
  padding: 0;
}

@mixin image-replacement() {
  overflow: hidden;
  text-indent: -10000%;
  white-space: nowrap;
}

@mixin image-replacement-graphic($url, $retina-url, $width, $height) {
  background: {
    position: center center;
    repeat: no-repeat;
    size: contain;
  }

  @include size($width, $height);
  @include image-replacement();

  @media screen and #{$standard-def} {
    background-image: asset-data-url($url);
  }
  @media screen and #{$retina} {
    background-image: asset-data-url($retina-url);
  }
}

@mixin social-icon($domain) {
  @include image-replacement-graphic(
    "social-icons/#{$domain}.svg",
    "social-icons/#{$domain}.svg",
    40px,
    40px
  );
}

@mixin podcast-subscribe-button($domain) {
  @include image-replacement-graphic(
    "podcast-subscribe-buttons/#{$domain}.png",
    "podcast-subscribe-buttons/#{$domain}.png",
    110px,
    40px
  );
}

@mixin size($w, $h) {
  height: $h;
  width: $w;
}

@mixin square($dim) {
  @include size($dim, $dim);
}

@mixin selection($color, $background) {
  ::selection,
  ::-moz-selection,
  ::-webkit-selection {
    color: $color;
    background: $background;
  }
}

@mixin hide-text() {
  background-color: transparent;
  color: transparent;
  border: 0;
  font: 0/0 a;
  text-shadow: none;
}
