//                                                              d8b
//                                                              Y8P
//
// 888d888 .d88b.  .d8888b  88888b.   .d88b.  88888b.  .d8888b  888 888  888  .d88b.
// 888P"  d8P  Y8b 88K      888 "88b d88""88b 888 "88b 88K      888 888  888 d8P  Y8b
// 888    88888888 "Y8888b. 888  888 888  888 888  888 "Y8888b. 888 Y88  88P 88888888
// 888    Y8b.          X88 888 d88P Y88..88P 888  888      X88 888  Y8bd8P  Y8b.
// 888     "Y8888   88888P' 88888P"   "Y88P"  888  888  88888P' 888   Y88P    "Y8888
//                          888
//                          888
//                          888

// Responsive
//
// These are utility classes that can be used to hide elements based on the viewport widths defined in [Tokens ➔ Breakpoints](/tokens/breakpoints).
//
// .hide-xs-down    - Hide element when screen size is smaller than the XS breakpoint.
// .hide-xs-up      - Hide element when screen size is equal to or greater than the XS breakpoint.
// .hide-s-down     - Hide element when screen size is smaller than the S breakpoint.
// .hide-s-up       - Hide element when screen size is equal to or greater than the S breakpoint.
// .hide-m-down     - Hide element when screen size is smaller than the M breakpoint.
// .hide-m-up       - Hide element when screen size is equal to or greater than the M breakpoint.
// .hide-l-down     - Hide element when screen size is smaller than the L breakpoint.
// .hide-l-up       - Hide element when screen size is equal to or greater than the L breakpoint.
// .hide-xl-down    - Hide element when screen size is smaller than the XL breakpoint.
// .hide-xl-up      - Hide element when screen size is equal to or greater than the XL breakpoint.
// .hide-xxl-down   - Hide element when screen size is smaller than the XXL breakpoint.
// .hide-xxl-up     - Hide element when screen size is equal to or greater than the XXL breakpoint.
// .hide-xxxl-up    - Hide element when screen size is equal to or greater than the XXXL breakpoint.
//
// Styleguide Utilities.Responsive
.hide-xs-down {
  display: none;

  @include breakpoint(s) {
    display: block;
  }
}

.hide-xs-up {
  @include breakpoint(xs) {
    display: none;
  }
}

.hide-s-down {
  display: none;

  @include breakpoint(m) {
    display: block;
  }
}

.hide-s-up {
  @include breakpoint(s) {
    display: none;
  }
}

.hide-m-down {
  display: none;

  @include breakpoint(l) {
    display: block;
  }
}

.hide-m-up {
  @include breakpoint(m) {
    display: none;
  }
}

.hide-l-down {
  display: none;

  @include breakpoint(xl) {
    display: block;
  }
}

.hide-l-up {
  @include breakpoint(l) {
    display: none;
  }
}

.hide-xl-down {
  display: none;

  @include breakpoint(xxl) {
    display: block;
  }
}

.hide-xl-up {
  @include breakpoint(xl) {
    display: none;
  }
}

.hide-xxl-down {
  display: none;

  @include breakpoint(xxxl) {
    display: block;
  }
}

.hide-xxl-up {
  @include breakpoint(xxl) {
    display: none;
  }
}

.hide-xxxl-up {
  @include breakpoint(xxxl) {
    display: none;
  }
}