/**
 * Fix for vh on ipad iOS 7.
 * http://caniuse.com/#feat=viewport-unit-for-ipads
 */
.adaptive,
.show-on {
  visibility: hidden;
}

@media all and (max-width: 46.24em) {
  .adaptive--mobile,
.show-on--mobile {
    visibility: visible;
  }

  .adaptive--tablet:not(.adaptive--mobile),
.show-on--tablet:not(.show-on--mobile) {
    display: none !important;
  }

  .adaptive--desktop:not(.adaptive--mobile),
.show-on--desktop:not(.show-on--mobile) {
    display: none !important;
  }
}
@media all and (min-width: 46.25em) and (max-width: 61.24em) {
  .adaptive--mobile:not(.adaptive--tablet),
.show-on--mobile:not(.show-on--tablet) {
    display: none !important;
  }

  .adaptive--tablet,
.show-on--tablet {
    visibility: visible;
  }

  .adaptive--desktop:not(.adaptive--tablet),
.show-on--desktop:not(.show-on--tablet) {
    display: none !important;
  }
}
@media all and (min-width: 61.25em) {
  .adaptive--mobile:not(.adaptive--desktop),
.show-on--mobile:not(.show-on--desktop) {
    display: none !important;
  }

  .adaptive--tablet:not(.adaptive--desktop),
.show-on--tablet:not(.show-on--desktop) {
    display: none !important;
  }

  .adaptive--desktop,
.show-on--desktop {
    visibility: visible;
  }
}
/*doc
---
title: Device dependencies
name: device-dependencies
category: Patterns
---

`.visible-on .visible-on--tablet` <br />
`.visible-on .visible-on--tablet--ios` <br />
`.visible-on .visible-on--tablet--android` <br />
`.visible-on .visible-on--tablet--windows` <br />
`.visible-on .visible-on--smartphone` <br />
`.visible-on .visible-on--smartphone--ios` <br />
`.visible-on .visible-on--smartphone--android` <br />
`.visible-on .visible-on--smartphone--windows` <br />
`.visible-on .visible-on--desktop` <br />

Elements will become visable using `display: block;`
Is `display: inline;` needed ? Add `--inline`
Is `display: inline-block;` needed ? Add `--inline-block`

```html_example
	<a href="btn" class="visible-on visible-on--desktop"> Visible on desktop (block) </a>
	<a href="btn" class="visible-on visible-on--desktop--inline"> Visible on desktop (inline) </a>
	<a href="btn" class="visible-on visible-on--desktop--inline-block"> Visible on desktop (inline-block) </a>
```

```html_example
	<a href="btn" class="visible-on visible-on--desktop"> Visible on desktop </a>
	<a href="btn" class="visible-on visible-on--tablet"> Visible on tablet </a>
	<a href="btn" class="visible-on visible-on--tablet--ios"> Visible on tablet ios </a>
	<a href="btn" class="visible-on visible-on--tablet--android"> Visible on tablet android </a>
	<a href="btn" class="visible-on visible-on--tablet--windows"> Visible on tablet windows </a>
	<a href="btn" class="visible-on visible-on--smartphone"> Visible on smartphone </a>
	<a href="btn" class="visible-on visible-on--smartphone--ios"> Visible on smartphone ios </a>
	<a href="btn" class="visible-on visible-on--smartphone--android"> Visible on smartphone android </a>
```

*/
body.device--tablet .visible-on.visible-on--tablet {
  display: block;
}
body.device--tablet .visible-on--inline.visible-on--tablet {
  display: inline;
}
body.device--tablet .visible-on--inline-block.visible-on--tablet {
  display: inline-block;
}
body.device--tablet.os--android .visible-on.visible-on--tablet--android {
  display: block;
}
body.device--tablet.os--android .visible-on--inline.visible-on--tablet--android {
  display: inline;
}
body.device--tablet.os--android .visible-on--inline-block.visible-on--tablet--android {
  display: inline-block;
}
body.device--tablet.os--ios .visible-on.visible-on--tablet--ios {
  display: block;
}
body.device--tablet.os--ios .visible-on--inline.visible-on--tablet--ios {
  display: inline;
}
body.device--tablet.os--ios .visible-on--inline-block.visible-on--tablet--ios {
  display: inline-block;
}
body.device--tablet.os--windows .visible-on.visible-on--tablet--windows {
  display: block;
}
body.device--tablet.os--windows .visible-on--inline.visible-on--tablet--windows {
  display: inline;
}
body.device--tablet.os--windows .visible-on--inline-block.visible-on--tablet--windows {
  display: inline-block;
}
body.device--smartphone .visible-on.visible-on--smartphone {
  display: block;
}
body.device--smartphone .visible-on--inline.visible-on--smartphone {
  display: inline;
}
body.device--smartphone .visible-on--inline-block.visible-on--smartphone {
  display: inline-block;
}
body.device--smartphone.os--android .visible-on.visible-on--smartphone--android {
  display: block;
}
body.device--smartphone.os--android .visible-on--inline.visible-on--smartphone--android {
  display: inline;
}
body.device--smartphone.os--android .visible-on--inline-block.visible-on--smartphone--android {
  display: inline-block;
}
body.device--smartphone.os--ios .visible-on.visible-on--smartphone--ios {
  display: block;
}
body.device--smartphone.os--ios .visible-on--inline.visible-on--smartphone--ios {
  display: inline;
}
body.device--smartphone.os--ios .visible-on--inline-block.visible-on--smartphone--ios {
  display: inline-block;
}
body.device--smartphone.os--windowsPhone .visible-on.visible-on--smartphone--windows, body.device--smartphone.os--windows .visible-on.visible-on--smartphone--windows {
  display: block;
}
body.device--smartphone.os--windowsPhone .visible-on--inline.visible-on--smartphone--windows, body.device--smartphone.os--windows .visible-on--inline.visible-on--smartphone--windows {
  display: inline;
}
body.device--smartphone.os--windowsPhone .visible-on--inline-block.visible-on--smartphone--windows, body.device--smartphone.os--windows .visible-on--inline-block.visible-on--smartphone--windows {
  display: inline-block;
}
body.device--desktop .visible-on.visible-on--desktop {
  display: block;
}
body.device--desktop .visible-on--inline.visible-on--desktop {
  display: inline;
}
body.device--desktop .visible-on--inline-block.visible-on--desktop {
  display: inline-block;
}
body .visible-on {
  display: none;
}