/*
//  Breakpoint contingent hiding and showing.
//
//  2 breakpoints give 5 scenarios:
//    1. mobile only
//    2. mobile and tablet
//    3. tablet only
//    4. tablet and desktop
//    5. desktop only
*/

@include ui-from($ui-bp-tablet) {
  .ui-bp--mobile-only {
    display: none !important;
  }
}

@include ui-from($ui-bp-desktop) {
  .ui-bp--mobile-and-tablet {
    display: none !important;
  }
}

// Tablet only: uncomment if we ever need it.
@include ui-to($ui-bp-tablet) {
  .ui-bp--tablet-only {
    display: none !important;
  }
}

@include ui-from($ui-bp-desktop) {
  .ui-bp--tablet-only {
    display: none !important;
  }
}

@include ui-to($ui-bp-tablet) {
  .ui-bp--tablet-and-desktop {
    display: none !important;
  }
}

@include ui-to($ui-bp-desktop) {
  .ui-bp--desktop-only {
    display: none !important;
  }
}

// BP Flag
.ui-bp--flag {
  display: none;

  &::after {
    content: 'mobile';

    @include ui-from($ui-bp-tablet) {
      content: 'tablet';
    }

    @include ui-from($ui-bp-desktop) {
      content: 'desktop';
    }
  }
}