:root {
  --sm-width: 752px;
  --md-width: 940px;
  --lg-width: 1140px;
  --xl-width: 1540px;
}
/* When converting to styled components, use FullWidthContainer */
.wrapper,
:local(.wrapper) {
  width: 100%;
  margin: 0 auto;
  padding: 0 1em;
}

@media screen and (--breakpoint-min-sm) {
  .wrapper,
  :local(.wrapper) {
    padding-left: 2em;
    padding-right: 2em;
  }
}

@media screen and (--breakpoint-min-md) {
  .wrapper,
  :local(.wrapper) {
    padding-left: 3em;
    padding-right: 3em;
  }
}

/* set height full relative to the parent */
.full-height,
:local(.full-height) {
  height: 100%;
}

/* display utilities */
.block,
:local(.block) {
  display: block;
}

@media screen and (--breakpoint-min-lg) {
  .lg-block {
    display: block;
  }
}

.inline,
:local(.inline) {
  display: inline;
}

.inline-block,
:local(.inline-block) {
  display: inline-block;
}

@media screen and (--breakpoint-min-sm) {
  .sm-inline-block {
    display: inline-block;
  }
}

.table {
  display: table;
}

.full,
.full-width,
:local(.full),
:local(.full-width) {
  width: 100%;
}
.half {
  width: 50%;
}

/* position utilities */
.fixed,
:local(.fixed) {
  position: fixed;
}

.relative,
:local(.relative) {
  position: relative;
}
.absolute,
:local(.absolute) {
  position: absolute;
}

@media screen and (--breakpoint-min-sm) {
  .sm-absolute {
    position: absolute;
  }
}

.top,
:local(.top) {
  top: 0;
}
.right,
:local(.right) {
  right: 0;
}
.bottom,
:local(.bottom) {
  bottom: 0;
}
.left,
:local(.left) {
  left: 0;
}

@media screen and (--breakpoint-min-md) {
  .wrapper.wrapper--trim,
  :local(.wrapper.wrapper--trim) {
    max-width: var(--md-width);
  }
}

@media screen and (--breakpoint-min-md) {
  .wrapper.wrapper--small,
  :local(.wrapper.wrapper--small) {
    max-width: var(--sm-width);
  }
}

@media screen and (--breakpoint-min-lg) {
  .wrapper.lg-wrapper--trim {
    max-width: var(--lg-width);
  }
}

@media screen and (--breakpoint-min-xl) {
  .wrapper.lg-wrapper--trim {
    max-width: var(--xl-width);
  }
}

/* fully fit the parent element - use as a base for app-y pages like QB or settings */
.spread,
:local(.spread) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* force a stacking context for adding z-index to children */
.stacking-context {
  transform: scale(1);
}