/* Table of Contents
==================================================
# Mixins
# Ad
# Sizes
# Media Queries */

/* # Mixins
================================================== */
@mixin dimensions($height, $width) {
  height: $height;
  width: $width;
}

/* # Ad
================================================== */
.ad {
  background: $color-white;
  border: 1px solid $color-haze;
  box-sizing: border-box;
  display: block !important;
  visibility: visible !important;
  @include dimensions(220px, 220px);
}
.ad-center { margin: 0 auto; }

/* # Sizes
================================================== */
.ad-banner { @include dimensions(60px, 468px); }
.ad-half-banner { @include dimensions(60px, 234px); }
.ad-mobile-banner { @include dimensions(50px, 320px); }
.ad-vertical-banner { @include dimensions(240px, 120px); }
.ad-button { @include dimensions(125px, 125px); }
.ad-leaderboard { @include dimensions(90px, 728px); }
.ad-large-leaderboard { @include dimensions(90px, 970px); }
.ad-large-rectangle { @include dimensions(280px, 336px); }
.ad-medium-rectangle { @include dimensions(250px, 300px); }
.ad-small-rectangle { @include dimensions(150px, 180px); }
.ad-skyscrapper { @include dimensions(600px, 120px); }
.ad-large-skyscrapper { @include dimensions(600px, 300px); }
.ad-wide-skyscrapper { @include dimensions(600px, 160px); }
.ad-square { @include dimensions(250px, 250px); }
.ad-small-square { @include dimensions(200px, 200px); }

/* # Colors
================================================== */
.ad-dark {
  background: $color-black;
  border-color: $color-dark-black;
}
.ad-light {
  background: $color-light-haze;
  border-color: $color-dark-haze;
}

/* # Media Queries
================================================== */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
  .ad { border-width: 0.5px; }
}