/**
 * example:
 *  & > [horizontal-lt-s/m/l] { mixin() }
 *  & > [horizontal-gt-xs/s/m] { mixin() }
 *  & > [horizontal-xs/s/m/l] { mixin() }
 *  & > [horizontal] { mixin() }
 * would be created by:
 * responsify("& > ", horizontal, mixin)
 */
brick-layout {
  overflow: hidden;
  box-sizing: border-box;
  box-orient: vertical;
  position: relative;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
/**
   * Horizontal Layout
   *--------------------------------------------------*/
/**
   *  Flex-children
   *--------------------------------------------------*/
/**
   *  hide
   *--------------------------------------------------*/
/**
   *  Drawer
   *--------------------------------------------------*/
}
@media (max-width: 768px) {
  brick-layout[horizontal-lt-s] {
    box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
}
@media (max-width: 992px) {
  brick-layout[horizontal-lt-m] {
    box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
}
@media (max-width: 1200px) {
  brick-layout[horizontal-lt-l] {
    box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
}
@media (min-width: 768px) {
  brick-layout[horizontal-gt-xs] {
    box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
}
@media (min-width: 992px) {
  brick-layout[horizontal-gt-s] {
    box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
}
@media (min-width: 1200px) {
  brick-layout[horizontal-gt-m] {
    box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
}
@media (max-width: 768px) and (min-width: 992px) {
  brick-layout[horizontal-s] {
    box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
}
@media (max-width: 992px) and (min-width: 1200px) {
  brick-layout[horizontal-m] {
    box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
}
brick-layout[horizontal] {
  box-orient: horizontal;
  -webkit-flex-direction: row;
  flex-direction: row;
}
@media (max-width: 768px) {
  brick-layout > [flex-lt-s] {
    overflow: auto;
    -webkit-flex: 1;
    flex: 1;
  }
}
@media (max-width: 992px) {
  brick-layout > [flex-lt-m] {
    overflow: auto;
    -webkit-flex: 1;
    flex: 1;
  }
}
@media (max-width: 1200px) {
  brick-layout > [flex-lt-l] {
    overflow: auto;
    -webkit-flex: 1;
    flex: 1;
  }
}
@media (min-width: 768px) {
  brick-layout > [flex-gt-xs] {
    overflow: auto;
    -webkit-flex: 1;
    flex: 1;
  }
}
@media (min-width: 992px) {
  brick-layout > [flex-gt-s] {
    overflow: auto;
    -webkit-flex: 1;
    flex: 1;
  }
}
@media (min-width: 1200px) {
  brick-layout > [flex-gt-m] {
    overflow: auto;
    -webkit-flex: 1;
    flex: 1;
  }
}
@media (max-width: 768px) and (min-width: 992px) {
  brick-layout > [flex-s] {
    overflow: auto;
    -webkit-flex: 1;
    flex: 1;
  }
}
@media (max-width: 992px) and (min-width: 1200px) {
  brick-layout > [flex-m] {
    overflow: auto;
    -webkit-flex: 1;
    flex: 1;
  }
}
brick-layout > [flex] {
  overflow: auto;
  -webkit-flex: 1;
  flex: 1;
}
@media (max-width: 768px) {
  brick-layout [hide-lt-s] {
    display: none;
  }
}
@media (max-width: 992px) {
  brick-layout [hide-lt-m] {
    display: none;
  }
}
@media (max-width: 1200px) {
  brick-layout [hide-lt-l] {
    display: none;
  }
}
@media (min-width: 768px) {
  brick-layout [hide-gt-xs] {
    display: none;
  }
}
@media (min-width: 992px) {
  brick-layout [hide-gt-s] {
    display: none;
  }
}
@media (min-width: 1200px) {
  brick-layout [hide-gt-m] {
    display: none;
  }
}
@media (max-width: 768px) and (min-width: 992px) {
  brick-layout [hide-s] {
    display: none;
  }
}
@media (max-width: 992px) and (min-width: 1200px) {
  brick-layout [hide-m] {
    display: none;
  }
}
brick-layout [hide] {
  display: none;
}
@media (max-width: 768px) {
  brick-layout > [drawer-lt-s] {
    height: 100%;
    position: absolute;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
  }
}
@media (max-width: 992px) {
  brick-layout > [drawer-lt-m] {
    height: 100%;
    position: absolute;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
  }
}
@media (max-width: 1200px) {
  brick-layout > [drawer-lt-l] {
    height: 100%;
    position: absolute;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
  }
}
@media (min-width: 768px) {
  brick-layout > [drawer-gt-xs] {
    height: 100%;
    position: absolute;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
  }
}
@media (min-width: 992px) {
  brick-layout > [drawer-gt-s] {
    height: 100%;
    position: absolute;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
  }
}
@media (min-width: 1200px) {
  brick-layout > [drawer-gt-m] {
    height: 100%;
    position: absolute;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
  }
}
@media (max-width: 768px) and (min-width: 992px) {
  brick-layout > [drawer-s] {
    height: 100%;
    position: absolute;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
  }
}
@media (max-width: 992px) and (min-width: 1200px) {
  brick-layout > [drawer-m] {
    height: 100%;
    position: absolute;
    -webkit-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
  }
}
brick-layout > [drawer] {
  height: 100%;
  position: absolute;
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
}
brick-layout[open] > [drawer],
brick-layout[open] > [drawer-lt-s],
brick-layout[open] > [drawer-lt-m],
brick-layout[open] > [drawer-lt-l],
brick-layout[open] > [drawer-gt-xs],
brick-layout[open] > [drawer-gt-s],
brick-layout[open] > [drawer-gt-m],
brick-layout[open] > [drawer-xs],
brick-layout[open] > [drawer-s],
brick-layout[open] > [drawer-m],
brick-layout[open] > [drawer-l] {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}
@media (max-width: 768px) {
  brick-layout > [drawer-top-lt-s] {
    position: absolute;
    width: 100%;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
  }
}
@media (max-width: 992px) {
  brick-layout > [drawer-top-lt-m] {
    position: absolute;
    width: 100%;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
  }
}
@media (max-width: 1200px) {
  brick-layout > [drawer-top-lt-l] {
    position: absolute;
    width: 100%;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
  }
}
@media (min-width: 768px) {
  brick-layout > [drawer-top-gt-xs] {
    position: absolute;
    width: 100%;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
  }
}
@media (min-width: 992px) {
  brick-layout > [drawer-top-gt-s] {
    position: absolute;
    width: 100%;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
  }
}
@media (min-width: 1200px) {
  brick-layout > [drawer-top-gt-m] {
    position: absolute;
    width: 100%;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
  }
}
@media (max-width: 768px) and (min-width: 992px) {
  brick-layout > [drawer-top-s] {
    position: absolute;
    width: 100%;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
  }
}
@media (max-width: 992px) and (min-width: 1200px) {
  brick-layout > [drawer-top-m] {
    position: absolute;
    width: 100%;
    -webkit-transform: translate(0, -100%);
    transform: translate(0, -100%);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
  }
}
brick-layout > [drawer-top] {
  position: absolute;
  width: 100%;
  -webkit-transform: translate(0, -100%);
  transform: translate(0, -100%);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
}
brick-layout[open] > [drawer-top],
brick-layout[open] > [drawer-top-lt-s],
brick-layout[open] > [drawer-top-lt-m],
brick-layout[open] > [drawer-top-lt-l],
brick-layout[open] > [drawer-top-gt-xs],
brick-layout[open] > [drawer-top-gt-s],
brick-layout[open] > [drawer-top-gt-m],
brick-layout[open] > [drawer-top-xs],
brick-layout[open] > [drawer-top-s],
brick-layout[open] > [drawer-top-m],
brick-layout[open] > [drawer-top-l] {
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
}