// @doc off
// The blueprint IE mixins should be mixed into a stylesheet that gets conditionally included
// into IE like so:
// <!--[if lt IE 8]><link rel="stylesheet" href="ie.css"
//                   type="text/css" media="screen, projection"><![endif]-->
// @doc on

//| Usage Examples
//| --------------
//|
//| As a top-level mixin, apply to any page that includes the stylesheet:
//| <pre class="source-code sass">
//| +blueprint-ie
//| </pre>
//| Scoped by a presentational class:
//| <pre class="source-code sass">
//| body.blueprint
//|  +blueprint-ie(true)
//| </pre>
//| Scoped by semantic selectors:
//| <pre class="source-code sass">
//| body#page-1, body#page-2, body.a-special-page-type
//|   +blueprint-ie(true)
//| </pre>
//| **Deprecated:** You can pass the body selector as the first argument when used as a top-level mixin
//| <pre class="source-code sass">
//| +blueprint-ie("body#page-1, body#page-2, body.a-special-page-type")
//| </pre>
@mixin blueprint-ie($nested: false) {
  @if $nested {
    @include blueprint-ie-body;
    @include blueprint-ie-defaults;
  } @else {
    body { @include blueprint-ie-body; }
    @include blueprint-ie-defaults;
  }
}
@mixin blueprint-ie-body {
  text-align: center;
  @include blueprint-ie-hacks; }

@mixin blueprint-ie-hacks {
  * html & {
    legend {
      margin: 0px -8px 16px 0;
      padding: 0; } }
  html>& {
    p code {
      *white-space: normal; } } }

// Fixes for Blueprint "inline" forms in IE
@mixin blueprint-inline-form-ie {
  div, p {
    vertical-align: middle; }
  input {
    &.checkbox, &.radio, &.button, button {
      margin: 0.5em 0; } } }

@mixin blueprint-ie-defaults {
  .container {
    text-align: left; }
  sup {
    vertical-align: text-top; }
  sub {
    vertical-align: text-bottom; }
  hr {
    margin: -8px auto 11px; }
  img {
    -ms-interpolation-mode: bicubic; }
  fieldset {
    padding-top: 0; }
  legend {
    margin-top: -0.2em;
    margin-bottom: 1em;
    margin-left: -0.5em; }
  fieldset, #IE8#HACK {padding-top:1.4em;}
  legend, #IE8#HACK {margin-top:0;margin-bottom:0;}
  textarea {
    overflow: auto; }
  label {
    position: relative;
    top: -0.25em; }
  input {
    &.text {
      margin: 0.5em 0;
      background-color: white;
      border: 1px solid #bbbbbb;
      &:focus {
        border: 1px solid #666666; } }
    &.title {
      margin: 0.5em 0;
      background-color: white;
      border: 1px solid #bbbbbb;
      &:focus {
        border: 1px solid #666666; } }
    &.checkbox {
      position: relative;
      top: 0.25em; }
    &.radio {
      position: relative;
      top: 0.25em; }
    &.button {
      position: relative;
      top: 0.25em; } }
  textarea {
    margin: 0.5em 0; }
  select {
    margin: 0.5em 0; }
  button {
    position: relative;
    top: 0.25em; } }