.screenreader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.w-100 {
  width: 100% !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-center {
  text-align: center !important;
}

.h1 {
  font-size: var(--agnostic-h1) !important;
}

.h2 {
  font-size: var(--agnostic-h2) !important;
}

.h3 {
  font-size: var(--agnostic-h3) !important;
}

.h4 {
  font-size: var(--agnostic-h4) !important;
}

.h5 {
  font-size: var(--agnostic-h5) !important;
}

.h6 {
  font-size: var(--agnostic-h6) !important;
}

/* For use with position: absolute, position: fixed, etc. */
.top {
  top: 0 !important;
}

.bottom {
  bottom: 0 !important;
}

/* Accounts for potential scrollbars or scrollbar-gutter: stable both-edges;
which, for example, would cover up a Toast component. */
.start {
  left: var(--fluid-16) !important;
}

.end {
  right: var(--fluid-16) !important;
}

.center {
  left: 50% !important;
  transform: translateX(-50%) !important;
}
