@plangrid/structure/main.css

CSS structure library

.preset-box {
  box-sizing: border-box;
  max-height: 100%;
  max-width: 100%;
  border-radius: 0;
  border-width: 0;
  padding: 0;
  margin: 0;
}

.preset-input {
  border-radius: 0;
  border-style: inset;
  border-width: 0;
  box-sizing: border-box;
  display: inline-block;
  font: inherit;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: visible;
  padding: 0;
  text-transform: none;
}

.preset-textarea {
  border-radius: 0;
  border-style: inset;
  border-width: 0;
  box-sizing: border-box;
  display: inline-block;
  font: inherit;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: auto;
  padding: 0;
  text-transform: none;
}

.preset-button {
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  border-style: solid;
  border-width: 0;
  box-sizing: border-box;
  display: inline-block;
  font: inherit;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: visible;
  padding: 0;
  text-transform: none;
  touch-action: manipulation;
}

.preset-button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

.preset-button:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
}

.cbox {
  box-sizing: border-box;
  border-radius: 0.1875rem;
  border-style: solid;
  border-width: .0625rem;
  display: inline-block;
  position: relative;
  height: 1rem;
  width: 1rem;
  transition: none;
}

.cbox::before,
.cbox::after {
  content: "";
  position: absolute;
  left: 0.4375rem;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  transition: inherit;
}

.cbox::before {
  border-radius: 0.1875rem;
  border-style: solid;
  border-width: .0625rem;
  box-sizing: content-box;
  height: .875rem;
  width: .875rem;
}

/* checkline */

.cbox[aria-checked=mixed]::after {
  border-bottom-style: solid;
  border-bottom-width: 0.125rem;
  display: block;
  width: .375rem;
}

/* checkmark */

.cbox[aria-checked=mixed]:enabled:active::after,
.cbox[aria-checked=true]::after {
  border-style: solid;
  border-width: 0 .125rem .125rem 0;
  display: block;
  height: .4rem;
  width: .25rem;
  -webkit-transform:
    translateY(-65%)
    translateX(-50%)
    rotate(45deg);
          transform:
    translateY(-65%)
    translateX(-50%)
    rotate(45deg);
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/*
Frames are structural bases
*/

.frame-dense {
  -o-border-image: none;
     border-image: none;
  border-radius: 0.1875rem;
  border-radius: 0.1875rem;
  border-style: solid;
  border-width: 0.0625rem;
  display: inline-block;
  padding: 0.1875rem 0.6875rem;
  vertical-align: middle;
}

.frame-basic {
  -o-border-image: none;
     border-image: none;
  border-radius: 0.1875rem;
  border-radius: 0.1875rem;
  border-style: solid;
  border-width: 0.0625rem;
  display: inline-block;
  padding: 0.4375rem 0.9375rem;
  vertical-align: middle;
}

.frame-plush {
  -o-border-image: none;
     border-image: none;
  border-radius: 0.1875rem;
  border-radius: 0.1875rem;
  border-style: solid;
  border-width: 0.0625rem;
  display: inline-block;
  padding: 0.6875rem 1.4375rem;
  vertical-align: middle;
}

/*
Use unicode zero-width space to ensure height is as intended when empty.
This technique is line-height agnostic.
https://stackoverflow.com/q/48469414/770127
https://stackoverflow.com/a/29355130/770127
*/

.frame-dense:empty::before,
.frame-basic:empty::before,
.frame-plush:empty::before {
  content: "\200b";
}

.rdio {
  border-radius: 50%;
  border-style: solid;
  border-width: .0625rem;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  width: 1rem;
  height: 1rem;
  transition: none;
}

.rdio::before,
.rdio::after {
  border-radius: 50%;
  border-style: solid;
  border-width: 0;
  box-sizing: content-box;
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  transition: inherit;
}

.rdio:checked::after {
  border-width: .25rem;
}

.items-start { -webkit-box-align: start; align-items: flex-start }

.items-end { -webkit-box-align: end; align-items: flex-end }

.items-center { -webkit-box-align: center; align-items: center }

.items-baseline { -webkit-box-align: baseline; align-items: baseline }

.items-stretch { -webkit-box-align: stretch; align-items: stretch }

.self-start { align-self: flex-start }

.self-end { align-self: flex-end }

.self-center { align-self: center }

.self-baseline { align-self: baseline }

.self-stretch { align-self: stretch }

.justify-start { -webkit-box-pack: start; justify-content: flex-start }

.justify-end { -webkit-box-pack: end; justify-content: flex-end }

.justify-center { -webkit-box-pack: center; justify-content: center }

.justify-between { -webkit-box-pack: justify; justify-content: space-between }

.justify-around { justify-content: space-around }

.content-start { align-content: flex-start }

.content-end { align-content: flex-end }

.content-center { align-content: center }

.content-between { align-content: space-between }

.content-around { align-content: space-around }

.content-stretch { align-content: stretch }

.align-baseline { vertical-align: baseline }

.align-top { vertical-align: top }

.align-middle { vertical-align: middle }

.align-bottom { vertical-align: bottom }

.align-sub { vertical-align: sub }

.align-super { vertical-align: super }

.align-ascent { vertical-align: text-top }

.align-descent { vertical-align: text-bottom }

.text-left { text-align: left }

.text-right { text-align: right }

.text-center { text-align: center }

.anim-initial {
  -webkit-animation-fill-mode: none;
          animation-fill-mode: none;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-name: none;
          animation-name: none;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 0s;
          animation-duration: 0s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.anim-reverse { -webkit-animation-direction: reverse; animation-direction: reverse }

.anim-seed { -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards }

.anim-stay { -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards }

.anim-fill { -webkit-animation-fill-mode: both; animation-fill-mode: both }

.anim-paused { -webkit-animation-play-state: paused; animation-play-state: paused }

.anim-infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite }

.keyspeeds-spin { -webkit-animation-duration: 1800ms; animation-duration: 1800ms }

.keyframes-spin { -webkit-animation-name: spin; animation-name: spin }

@-webkit-keyframes spin {
  from { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}

@keyframes spin {
  from { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg) }
}

/* Deprecated. See README.md#border-radius */

.rounded { border-radius: 0.1875rem; border-radius: 0.1875rem }

.rounded-top { border-radius: 0.1875rem 0.1875rem 0 0; border-radius: 0.1875rem 0.1875rem 0 0 }

.rounded-right { border-radius: 0 0.1875rem 0.1875rem 0; border-radius: 0 0.1875rem 0.1875rem 0 }

.rounded-bottom { border-radius: 0 0 0.1875rem 0.1875rem; border-radius: 0 0 0.1875rem 0.1875rem }

.rounded-left { border-radius: 0.1875rem 0 0 0.1875rem; border-radius: 0.1875rem 0 0 0.1875rem }

.rounded-stack:first-child { border-top-left-radius: 0.1875rem; border-top-left-radius: 0.1875rem; border-top-right-radius: 0.1875rem; border-top-right-radius: 0.1875rem }

.rounded-stack:last-child { border-bottom-left-radius: 0.1875rem; border-bottom-left-radius: 0.1875rem; border-bottom-right-radius: 0.1875rem; border-bottom-right-radius: 0.1875rem }

.rounded-shelf:first-child { border-top-left-radius: 0.1875rem; border-top-left-radius: 0.1875rem; border-bottom-left-radius: 0.1875rem; border-bottom-left-radius: 0.1875rem }

.rounded-shelf:last-child { border-top-right-radius: 0.1875rem; border-top-right-radius: 0.1875rem; border-bottom-right-radius: 0.1875rem; border-bottom-right-radius: 0.1875rem }

/* Recommended. Our design system corner radii. Round to the nearest one */

.round-small { border-radius: 0.125rem; border-radius: 0.125rem }

.round-medium { border-radius: 0.1875rem; border-radius: 0.1875rem }

.round-large { border-radius: 0.75rem; border-radius: 0.75rem }

.round-circle { border-radius: 50% }

/* Recommended. Use these for sharpening any side */

.sharp-top { border-top-left-radius: 0; border-top-right-radius: 0 }

.sharp-left { border-top-left-radius: 0; border-bottom-left-radius: 0 }

.sharp-right { border-top-right-radius: 0; border-bottom-right-radius: 0 }

.sharp-bottom { border-bottom-left-radius: 0; border-bottom-right-radius: 0 }

.sharp-stack:not(:first-child) { border-top-left-radius: 0; border-top-right-radius: 0 }

.sharp-stack:not(:last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0 }

.sharp-shelf:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0 }

.sharp-shelf:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0 }

/* Deprecated. See README.md#border */

.border { border-style: solid; border-width: 0.0625rem }

.border-top { border-top-style: solid; border-top-width: 0.0625rem }

.border-right { border-right-style: solid; border-right-width: 0.0625rem }

.border-bottom { border-bottom-style: solid; border-bottom-width: 0.0625rem }

.border-left { border-left-style: solid; border-left-width: 0.0625rem }

/* Recommended =) */

.border-none { border-style: none }

.border-dashed { border-style: dashed }

.border-solid { border-style: solid }

.border-hidden { border-style: hidden }

/* Per-side classes override all-around ones */

.bt-none { border-top-style: none }

.bl-none { border-left-style: none }

.br-none { border-right-style: none }

.bb-none { border-bottom-style: none }

.bt-dashed { border-top-style: dashed }

.bl-dashed { border-left-style: dashed }

.br-dashed { border-right-style: dashed }

.bb-dashed { border-bottom-style: dashed }

.bt-solid { border-top-style: solid }

.bl-solid { border-left-style: solid }

.br-solid { border-right-style: solid }

.bb-solid { border-bottom-style: solid }

.bt-hidden { border-top-style: hidden }

.bl-hidden { border-left-style: hidden }

.br-hidden { border-right-style: hidden }

.bb-hidden { border-bottom-style: hidden }

/* Our standard border size */

.border-1px { border-width: 0.0625rem }

/* Useful for border unions */

.meld-stack:not(:first-child) { border-top-width: 0 }

.meld-shelf:not(:first-child) { border-left-width: 0 }

.weld-stack:not(:last-child) { border-bottom-width: 0 }

.weld-shelf:not(:last-child) { border-right-width: 0 }

.pointer {
  cursor: pointer;
}

:disabled .pointer,
[aria-disabled=true] .pointer,
.pointer[aria-disabled=true],
.pointer:disabled {
  cursor: default;
  cursor: not-allowed;
}

.flex { display: -webkit-box; display: flex }

.inline-flex { display: -webkit-inline-box; display: inline-flex }

.block { display: block }

.inline-block { display: inline-block }

.inline-flow { display: inline }

.inline-table { display: inline-table }

.block-flow { display: block }

.block-table { display: table }

.flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row }

.flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse }

.flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column }

.flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse }

.flex-wrap { flex-wrap: wrap }

.flex-nowrap { flex-wrap: nowrap }

.flex-wrap-reverse { flex-wrap: wrap-reverse }

.order-before { -webkit-box-ordinal-group: 0; order: -1 }

.order-after { -webkit-box-ordinal-group: 2; order: 1 }

.flex-golden { -webkit-box-flex: 0; flex: 0 1 61.803398875% }

.flex-initial { -webkit-box-flex: 0; flex: 0 1 auto }

.flex-auto { -webkit-box-flex: 1; flex: 1 1 auto }

.flex-none { -webkit-box-flex: 0; flex: 0 0 auto }

.flex-1 { -webkit-box-flex: 1; flex: 1 }

.flex-2 { -webkit-box-flex: 2; flex: 2 }

.flex-3 { -webkit-box-flex: 3; flex: 3 }

.flex-4 { -webkit-box-flex: 4; flex: 4 }

.flex-5 { -webkit-box-flex: 5; flex: 5 }

.flex-6 { -webkit-box-flex: 6; flex: 6 }

.flex-7 { -webkit-box-flex: 7; flex: 7 }

.flex-8 { -webkit-box-flex: 8; flex: 8 }

.flex-9 { -webkit-box-flex: 9; flex: 9 }

.flex-10 { -webkit-box-flex: 10; flex: 10 }

.flex-11 { -webkit-box-flex: 11; flex: 11 }

.flex-12 { -webkit-box-flex: 12; flex: 12 }

.grow-0 { -webkit-box-flex: 0; flex-grow: 0 }

.grow-1 { -webkit-box-flex: 1; flex-grow: 1 }

.grow-2 { -webkit-box-flex: 2; flex-grow: 2 }

.grow-3 { -webkit-box-flex: 3; flex-grow: 3 }

.grow-4 { -webkit-box-flex: 4; flex-grow: 4 }

.grow-5 { -webkit-box-flex: 5; flex-grow: 5 }

.grow-6 { -webkit-box-flex: 6; flex-grow: 6 }

.grow-7 { -webkit-box-flex: 7; flex-grow: 7 }

.grow-8 { -webkit-box-flex: 8; flex-grow: 8 }

.grow-9 { -webkit-box-flex: 9; flex-grow: 9 }

.grow-10 { -webkit-box-flex: 10; flex-grow: 10 }

.grow-11 { -webkit-box-flex: 11; flex-grow: 11 }

.grow-12 { -webkit-box-flex: 12; flex-grow: 12 }

.shrink-0 { flex-shrink: 0 }

.shrink-1 { flex-shrink: 1 }

.shrink-2 { flex-shrink: 2 }

.shrink-3 { flex-shrink: 3 }

.shrink-4 { flex-shrink: 4 }

.shrink-5 { flex-shrink: 5 }

.shrink-6 { flex-shrink: 6 }

.shrink-7 { flex-shrink: 7 }

.shrink-8 { flex-shrink: 8 }

.shrink-9 { flex-shrink: 9 }

.shrink-10 { flex-shrink: 10 }

.shrink-11 { flex-shrink: 11 }

.shrink-12 { flex-shrink: 12 }

.basis-0 { flex-basis: 0% }

.basis-1 { flex-basis: 8.333333333% }

.basis-2 { flex-basis: 16.6666666666% }

.basis-3 { flex-basis: 25% }

.basis-4 { flex-basis: 33.3333333333% }

.basis-5 { flex-basis: 41.6666666666% }

.basis-6 { flex-basis: 50% }

.basis-7 { flex-basis: 58.333333333% }

.basis-8 { flex-basis: 66.6666666666% }

.basis-9 { flex-basis: 75% }

.basis-10 { flex-basis: 83.3333333333% }

.basis-11 { flex-basis: 91.6666666666% }

.basis-12 { flex-basis: 100% }

.basis-100vw { flex-basis: 100vw }

.basis-100vh { flex-basis: 100vh }

.basis-100vmax { flex-basis: 100vmax }

.basis-100vmin { flex-basis: 100vmin }

.basis-golden { flex-basis: 61.803398875% }

.basis-content { flex-basis: content }

.basis-auto { flex-basis: auto }

@media (orientation: portrait) {
  .flex\@portrait { display: -webkit-box; display: flex }
  .inline-flex\@portrait { display: -webkit-inline-box; display: inline-flex }
  .flex-wrap\@portrait { flex-wrap: wrap }
  .flex-nowrap\@portrait { flex-wrap: nowrap }
  .flex-wrap-reverse\@portrait { flex-wrap: wrap-reverse }
}

@media (orientation: landscape) {
  .flex\@landscape { display: -webkit-box; display: flex }
  .inline-flex\@landscape { display: -webkit-inline-box; display: inline-flex }
  .flex-wrap\@landscape { flex-wrap: wrap }
  .flex-nowrap\@landscape { flex-wrap: nowrap }
  .flex-wrap-reverse\@landscape { flex-wrap: wrap-reverse }
}

.float-none { float: none }

.float-left { float: left }

.float-right { float: right }

/* Compose like "font-os font-xl" */

.font-os {
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
}

.font-c {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.25;
  text-transform: none }

.font-b {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  text-transform: none }

.font-xxs {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase }

.font-xs {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: none }

.font-s {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
  text-transform: none }

.font-m {
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.25;
  text-transform: none }

.font-l {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.125;
  text-transform: none }

.font-xl {
  font-size: 2.625rem;
  font-weight: 600;
  line-height: 1;
  text-transform: none }

.family-inherit { font-family: inherit }

.family-os { font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol"; font-family: -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol" }

.unbold { font-weight: 400 }

.semibold { font-weight: 600 }

.bold { font-weight: 700 }

.weight-inherit { font-weight: inherit }

.weight-light { font-weight: 300 }

.weight-normal { font-weight: 400 }

.weight-semibold { font-weight: 600 }

.weight-bold { font-weight: 700 }

.size-inherit { font-size: inherit }

.size-body { font-size: 0.875rem }

.size-caption { font-size: 0.75rem }

/* Deprecated heading sizers */

.size-h1 { font-size: 2.625rem }

/* 44px => 42px */

.size-h2 { font-size: 2rem }

/* 36px => 32px */

.size-h3 { font-size: 1.625rem }

/* 28px => 26px */

.size-h4 { font-size: 1.25rem }

/* 24px => 20px */

/* Deprecated keyword sizers */

.size-coarse { font-size: 1.25rem }

.size-text { font-size: 1rem }

.size-fine { font-size: 0.875rem }

/* Constant sizers to favor */

.size-12px { font-size: 0.75rem }

.size-14px { font-size: 0.875rem }

.size-16px { font-size: 1rem }

.size-20px { font-size: 1.25rem }

.size-26px { font-size: 1.625rem }

.size-32px { font-size: 2rem }

.size-42px { font-size: 2.625rem }

.size-collapse { font-size: 0 }

.line-initial { line-height: normal }

.line-inherit { line-height: inherit }

.line-single { line-height: 1 }

.line-subcompact { line-height: 1.125 }

.line-compact { line-height: 1.25 }

.line-passing { line-height: 1.5 }

.line-double { line-height: 2 }

.line-collapse { line-height: 0 }

.font-collapse {
  font-size: 0;
  line-height: 0;
}

.case-none { text-transform: none }

.case-upper { text-transform: uppercase }

.case-lower { text-transform: lowercase }

.case-proper { text-transform: capitalize }

.letter-upper::first-letter { text-transform: uppercase }

.letter-lower::first-letter { text-transform: lowercase }

.underline-none { text-decoration: none }

.underline-focus:focus,
.underline-hover:hover,
.underline { text-decoration: underline }

.ws-normal { white-space: normal }

.ws-nowrap { white-space: nowrap }

.ws-pre { white-space: pre }

.ws-pre-wrap { white-space: pre-wrap }

.ws-pre-line { white-space: pre-line }

.list-disc { list-style-type: disc }

.list-circle { list-style-type: circle }

.list-outside { list-style-position: outside }

.list-inside { list-style-position: inside }

.list-none { list-style: none }

.free-top { margin-top: auto }

.free-left { margin-left: auto }

.free-right { margin-right: auto }

.free-bottom { margin-bottom: auto }

.-m2 { margin: -1rem; margin: -1rem }

.-m12px { margin: 0.75rem }

.-m1 { margin: -0.5rem; margin: -0.5rem }

.-m4px { margin: -0.25rem }

.m0 { margin: 0 }

.m4px { margin: 0.25rem }

.m1 { margin: .5rem; margin: .5rem }

.m12px { margin: 0.75rem }

.m2 { margin: 1rem; margin: 1rem }

.m3 { margin: 2rem; margin: 2rem }

.m4 { margin: 4rem; margin: 4rem }

.m-auto { margin: auto }

.mt0 { margin-top: 0 }

.mt1 { margin-top: .5rem; margin-top: .5rem }

.mt2 { margin-top: 1rem; margin-top: 1rem }

.mt3 { margin-top: 2rem; margin-top: 2rem }

.mt4 { margin-top: 4rem; margin-top: 4rem }

.ml0 { margin-left: 0 }

.ml1 { margin-left: .5rem; margin-left: .5rem }

.ml2 { margin-left: 1rem; margin-left: 1rem }

.ml3 { margin-left: 2rem; margin-left: 2rem }

.ml4 { margin-left: 4rem; margin-left: 4rem }

.mr0 { margin-right: 0 }

.mr1 { margin-right: .5rem; margin-right: .5rem }

.mr2 { margin-right: 1rem; margin-right: 1rem }

.mr3 { margin-right: 2rem; margin-right: 2rem }

.mr4 { margin-right: 4rem; margin-right: 4rem }

.mb0 { margin-bottom: 0 }

.mb1 { margin-bottom: .5rem; margin-bottom: .5rem }

.mb2 { margin-bottom: 1rem; margin-bottom: 1rem }

.mb3 { margin-bottom: 2rem; margin-bottom: 2rem }

.mb4 { margin-bottom: 4rem; margin-bottom: 4rem }

.mt-auto { margin-top: auto }

.ml-auto { margin-left: auto }

.mr-auto { margin-right: auto }

.mb-auto { margin-bottom: auto }

.mt0-first:first-child { margin-top: 0 }

.ml0-first:first-child { margin-left: 0 }

.mr0-first:first-child { margin-right: 0 }

.mb0-first:first-child { margin-bottom: 0 }

.mt0-last:last-child { margin-top: 0 }

.ml0-last:last-child { margin-left: 0 }

.mr0-last:last-child { margin-right: 0 }

.mb0-last:last-child { margin-bottom: 0 }

[data-spacing~=-m2] { margin: -1rem; margin: -1rem }

[data-spacing~=-m1] { margin: -0.5rem; margin: -0.5rem }

[data-spacing~=m0] { margin: 0 }

[data-spacing~=m1] { margin: .5rem; margin: .5rem }

[data-spacing~=m2] { margin: 1rem; margin: 1rem }

[data-spacing~=m3] { margin: 2rem; margin: 2rem }

[data-spacing~=m4] { margin: 4rem; margin: 4rem }

[data-spacing~=m-auto] { margin: auto }

[data-spacing~=mt0] { margin-top: 0 }

[data-spacing~=mt1] { margin-top: .5rem; margin-top: .5rem }

[data-spacing~=mt2] { margin-top: 1rem; margin-top: 1rem }

[data-spacing~=mt3] { margin-top: 2rem; margin-top: 2rem }

[data-spacing~=mt4] { margin-top: 4rem; margin-top: 4rem }

[data-spacing~=ml0] { margin-left: 0 }

[data-spacing~=ml1] { margin-left: .5rem; margin-left: .5rem }

[data-spacing~=ml2] { margin-left: 1rem; margin-left: 1rem }

[data-spacing~=ml3] { margin-left: 2rem; margin-left: 2rem }

[data-spacing~=ml4] { margin-left: 4rem; margin-left: 4rem }

[data-spacing~=mr0] { margin-right: 0 }

[data-spacing~=mr1] { margin-right: .5rem; margin-right: .5rem }

[data-spacing~=mr2] { margin-right: 1rem; margin-right: 1rem }

[data-spacing~=mr3] { margin-right: 2rem; margin-right: 2rem }

[data-spacing~=mr4] { margin-right: 4rem; margin-right: 4rem }

[data-spacing~=mb0] { margin-bottom: 0 }

[data-spacing~=mb1] { margin-bottom: .5rem; margin-bottom: .5rem }

[data-spacing~=mb2] { margin-bottom: 1rem; margin-bottom: 1rem }

[data-spacing~=mb3] { margin-bottom: 2rem; margin-bottom: 2rem }

[data-spacing~=mb4] { margin-bottom: 4rem; margin-bottom: 4rem }

[data-spacing~=mt-auto] { margin-top: auto }

[data-spacing~=ml-auto] { margin-left: auto }

[data-spacing~=mr-auto] { margin-right: auto }

[data-spacing~=mb-auto] { margin-bottom: auto }

[data-spacing~=mt0-first]:first-child { margin-top: 0 }

[data-spacing~=ml0-first]:first-child { margin-left: 0 }

[data-spacing~=mr0-first]:first-child { margin-right: 0 }

[data-spacing~=mb0-first]:first-child { margin-bottom: 0 }

[data-spacing~=mt0-last]:last-child { margin-top: 0 }

[data-spacing~=ml0-last]:last-child { margin-left: 0 }

[data-spacing~=mr0-last]:last-child { margin-right: 0 }

[data-spacing~=mb0-last]:last-child { margin-bottom: 0 }

/* Use this only if another property provides :focus affordance */

.outline-none { outline-style: none }

.overflow-visible { overflow: visible }

.overflow-hidden { overflow: hidden }

.overflow-scroll { overflow: scroll }

.overflow-auto { overflow: auto }

/* Deprecated. Favor .ox-* */

.overflow-x-visible { overflow-x: visible }

.overflow-x-hidden { overflow-x: hidden }

.overflow-x-scroll { overflow-x: scroll }

.overflow-x-auto { overflow-x: auto }

/* Deprecated. Favor .oy-* */

.overflow-y-visible { overflow-y: visible }

.overflow-y-hidden { overflow-y: hidden }

.overflow-y-scroll { overflow-y: scroll }

.overflow-y-auto { overflow-y: auto }

.ox-visible { overflow-x: visible }

.ox-hidden { overflow-x: hidden }

.ox-scroll { overflow-x: scroll }

.ox-auto { overflow-x: auto }

.oy-visible { overflow-y: visible }

.oy-hidden { overflow-y: hidden }

.oy-scroll { overflow-y: scroll }

.oy-auto { overflow-y: auto }

.overflow-dots { text-overflow: ellipsis }

.wrap-normal { word-wrap: normal; overflow-wrap: normal }

.wrap-word { word-wrap: break-word; overflow-wrap: break-word }

.pad-dense { padding: 0.25rem 0.75rem }

.pad-basic { padding: 0.5rem 1rem }

.pad-plush { padding: 0.75rem 1.5rem }

.p0 { padding: 0 }

.p4px { padding: 0.25rem }

.p1 { padding: .5rem; padding: .5rem }

.p12px { padding: 0.75rem }

.p2 { padding: 1rem; padding: 1rem }

.p3 { padding: 2rem; padding: 2rem }

.p4 { padding: 4rem; padding: 4rem }

.pt0 { padding-top: 0 }

.pt1 { padding-top: .5rem; padding-top: .5rem }

.pt2 { padding-top: 1rem; padding-top: 1rem }

.pt3 { padding-top: 2rem; padding-top: 2rem }

.pt4 { padding-top: 4rem; padding-top: 4rem }

.pl0 { padding-left: 0 }

.pl1 { padding-left: .5rem; padding-left: .5rem }

.pl2 { padding-left: 1rem; padding-left: 1rem }

.pl3 { padding-left: 2rem; padding-left: 2rem }

.pl4 { padding-left: 4rem; padding-left: 4rem }

.pr0 { padding-right: 0 }

.pr1 { padding-right: .5rem; padding-right: .5rem }

.pr2 { padding-right: 1rem; padding-right: 1rem }

.pr3 { padding-right: 2rem; padding-right: 2rem }

.pr4 { padding-right: 4rem; padding-right: 4rem }

.pb0 { padding-bottom: 0 }

.pb1 { padding-bottom: .5rem; padding-bottom: .5rem }

.pb2 { padding-bottom: 1rem; padding-bottom: 1rem }

.pb3 { padding-bottom: 2rem; padding-bottom: 2rem }

.pb4 { padding-bottom: 4rem; padding-bottom: 4rem }

[data-spacing~=p0] { padding: 0 }

[data-spacing~=p1] { padding: .5rem; padding: .5rem }

[data-spacing~=p2] { padding: 1rem; padding: 1rem }

[data-spacing~=p3] { padding: 2rem; padding: 2rem }

[data-spacing~=p4] { padding: 4rem; padding: 4rem }

[data-spacing~=pt0] { padding-top: 0 }

[data-spacing~=pt1] { padding-top: .5rem; padding-top: .5rem }

[data-spacing~=pt2] { padding-top: 1rem; padding-top: 1rem }

[data-spacing~=pt3] { padding-top: 2rem; padding-top: 2rem }

[data-spacing~=pt4] { padding-top: 4rem; padding-top: 4rem }

[data-spacing~=pl0] { padding-left: 0 }

[data-spacing~=pl1] { padding-left: .5rem; padding-left: .5rem }

[data-spacing~=pl2] { padding-left: 1rem; padding-left: 1rem }

[data-spacing~=pl3] { padding-left: 2rem; padding-left: 2rem }

[data-spacing~=pl4] { padding-left: 4rem; padding-left: 4rem }

[data-spacing~=pr0] { padding-right: 0 }

[data-spacing~=pr1] { padding-right: .5rem; padding-right: .5rem }

[data-spacing~=pr2] { padding-right: 1rem; padding-right: 1rem }

[data-spacing~=pr3] { padding-right: 2rem; padding-right: 2rem }

[data-spacing~=pr4] { padding-right: 4rem; padding-right: 4rem }

[data-spacing~=pb0] { padding-bottom: 0 }

[data-spacing~=pb1] { padding-bottom: .5rem; padding-bottom: .5rem }

[data-spacing~=pb2] { padding-bottom: 1rem; padding-bottom: 1rem }

[data-spacing~=pb3] { padding-bottom: 2rem; padding-bottom: 2rem }

[data-spacing~=pb4] { padding-bottom: 4rem; padding-bottom: 4rem }

.events-none { pointer-events: none }

.events-auto { pointer-events: auto }

.static { position: static }

.relative { position: relative }

.absolute { position: absolute }

.fixed { position: fixed }

.focus-static:focus { position: static }

.focus-relative:focus { position: relative }

.top-0 { top: 0 }

.left-0 { left: 0 }

.right-0 { right: 0 }

.bottom-0 { bottom: 0 }

.top-auto { top: auto }

.left-auto { left: auto }

.right-auto { right: auto }

.bottom-auto { bottom: auto }

.resize-none { resize: none }

.resize-both { resize: both }

.content-box { box-sizing: content-box }

.border-box { box-sizing: border-box }

.width-zero { width: 0 }

.width-all { width: 100% }

.width-em { width: 1em }

.width-rem { width: 1rem }

.width-viewport { width: 100vw }

.width-auto { width: auto }

.height-zero { height: 0 }

.height-all { height: 100% }

.height-em { height: 1em }

.height-rem { height: 1rem }

.height-viewport { height: 100vh }

.height-auto { height: auto }

.max-none { max-width: none; max-height: none }

.max-zero { max-width: 0; max-height: 0 }

.min-zero { min-width: 0; min-height: 0 }

.min-auto { min-width: auto; min-height: auto }

.max-viewport { max-width: 100vw; max-height: 100vh }

.min-viewport { min-width: 100vw; min-height: 100vh }

.width-free { max-width: none }

.width-fit { max-width: 100% }

.width-clip { max-width: 0 }

.width-force { min-width: 100% }

.height-free { max-height: none }

.height-fit { max-height: 100% }

.height-clip { max-height: 0 }

.height-force { min-height: 100% }

.-tx100 { -webkit-transform: translateX(-100%); transform: translateX(-100%) }

.-ty100 { -webkit-transform: translateY(-100%); transform: translateY(-100%) }

.tx0 { -webkit-transform: translateX(0); transform: translateX(0) }

.ty0 { -webkit-transform: translateY(0); transform: translateY(0) }

.tx100 { -webkit-transform: translateX(100%); transform: translateX(100%) }

.ty100 { -webkit-transform: translateY(100%); transform: translateY(100%) }

.appearance-none {
  -moz-appearance: none;
  -webkit-appearance: none;
}

.vis-visible { visibility: visible }

.vis-hidden { visibility: hidden }

.vis-collapse { visibility: collapse }

/* See CONTRIBUTING.md about more.css */