// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

// Responsive utilities
// -------------------------
// More easily include all the states for responsive-utilities.less.
// [converter] $parent hack
@mixin responsive-visibility($parent) {
  #{$parent} { display: block !important; }
  table#{$parent}  { display: table; }
  tr#{$parent}     { display: table-row !important; }
  th#{$parent},
  td#{$parent}     { display: table-cell !important; }
}

// [converter] $parent hack
@mixin responsive-invisibility($parent) {
    #{$parent},
  tr#{$parent},
  th#{$parent},
  td#{$parent} { display: none !important; }
}



// helpers for showing/hiding content depending on logged in status

html {
  // mobile and logged in only are hidden by default
  @include responsive-invisibility('.visible-device-mobile');
  @include responsive-invisibility('.visible-ios');
  @include responsive-invisibility('.visible-android');
  @include responsive-visibility('.hidden-device-mobile');
  @include responsive-visibility('.hidden-ios');
  @include responsive-visibility('.hidden-android');

  @include responsive-invisibility('.visible-asana-logged-in');
  @include responsive-visibility('.hidden-asana-logged-in');


  // when logged in, mobile is still hidden, but logged in are visible
  &.asana-is-logged-in {
    @include responsive-invisibility('.visible-device-mobile');
    @include responsive-invisibility('.visible-ios');
    @include responsive-invisibility('.visible-android');
    @include responsive-visibility('.hidden-device-mobile');
    @include responsive-visibility('.hidden-ios');
    @include responsive-visibility('.hidden-android');

    // mobile devices stay hidden! even if you're 'visible logged in'!
    @include responsive-invisibility('.visible-device-mobile.visible-asana-logged-in');
    @include responsive-invisibility('.visible-ios.visible-asana-logged-in');
    @include responsive-invisibility('.visible-android.visible-asana-logged-in');
    @include responsive-visibility('.hidden-device-mobile.visible-asana-logged-in');
    @include responsive-visibility('.hidden-ios.visible-asana-logged-in');
    @include responsive-visibility('.hidden-android.visible-asana-logged-in');

    @include responsive-visibility('.visible-asana-logged-in');
    @include responsive-invisibility('.hidden-asana-logged-in');

    // only when logged in and mobile does logged in mobile show
    &.device-mobile {
      @include responsive-visibility('.visible-device-mobile.visible-asana-logged-in');
      @include responsive-invisibility('.hidden-device-mobile.hidden-asana-logged-in');
      @include responsive-invisibility('.hidden-ios.hidden-asana-logged-in');
      @include responsive-invisibility('.hidden-android.hidden-asana-logged-in');

    }
    &.device-android {
      @include responsive-visibility('.visible-device-mobile.visible-asana-logged-in');
      @include responsive-visibility('.visible-android.visible-asana-logged-in');
      @include responsive-invisibility('.hidden-device-mobile.visible-asana-logged-in');
      @include responsive-invisibility('.hidden-android.visible-asana-logged-in');
    }
    &.device-ios {
      @include responsive-visibility('.visible-device-mobile.visible-asana-logged-in');
      @include responsive-visibility('.visible-ios.visible-asana-logged-in');
      @include responsive-invisibility('.hidden-device-mobile.visible-asana-logged-in');
      @include responsive-invisibility('.hidden-ios.visible-asana-logged-in');
    }

  }
  // when not logged in, but mobile, show mobile
  &.device-mobile {
    @include responsive-visibility('.visible-device-mobile');
    @include responsive-invisibility('.hidden-device-mobile');
    @include responsive-invisibility('.hidden-ios');
    @include responsive-invisibility('.hidden-android');
    body { overflow-x: hidden; }
  }
  &.device-android {
    @include responsive-visibility('.visible-device-mobile');
    @include responsive-visibility('.visible-android');
    @include responsive-invisibility('.hidden-device-mobile');
    @include responsive-invisibility('.hidden-android');
  }
  &.device-ios {
    @include responsive-visibility('.visible-device-mobile');
    @include responsive-visibility('.visible-ios');
    @include responsive-invisibility('.hidden-device-mobile');
    @include responsive-invisibility('.hidden-ios');
  }
}