.position\:relative {
  position: relative;
}

.min-block-size\:100vh {
  min-block-size: 100vh;
}

.margin-inline\:s {
  margin-inline: var(--space-s);
}

.margin-inline\:m {
  margin-inline: var(--space-m);
}

.margin-block\:s {
  margin-block: var(--space-s);
}

.margin-block-start\:0 {
  margin-block-start: 0;
}

.margin-block-end\:auto {
  margin-block-end: auto;
}

.margin-inline-end\:3xs {
  margin-inline-end: var(--space-3xs);
}

.margin-block-start\:xs {
  margin-block-start: var(--space-xs);
}

.gap\:2xs {
  gap: var(--space-2xs);
}

.display\:flex {
  display: flex;
}

.align-items\:center {
  align-items: center;
}

.justify-content\:center {
  justify-content: center;
}

.justify-content\:flex-end {
  justify-content: flex-end;
}

.flex-grow\:0 {
  flex-grow: 0;
}

.flex-grow\:point-five {
  flex-grow: 0.5;
}

.visibility\:hidden {
  visibility: hidden;
}

/* Visually hidden but still announced by screen readers -- unlike
   visibility:hidden, this keeps the content in the accessibility tree. */
.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-align\:left {
  text-align: left;
}

.text-align\:center {
  text-align: center;
}

.text-align\:right {
  text-align: right;
}

.text-select\:none {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.padding\:0 {
  padding: 0;
}

.padding\:s {
  padding: var(--space-s);
}

.padding\:3xs {
  padding: var(--space-3xs);
}

.padding-bottom\:xs {
  padding-bottom: var(--space-xs);
}

.font-size\:xxl {
  font-size: var(--font-size-xxl);
}

.font-size\:xl {
  font-size: var(--font-size-xl);
}

.font-size\:l {
  font-size: var(--font-size-l);
}

.font-size\:l-m {
  font-size: var(--font-size-l-m);
}

.font-size\:m {
  font-size: var(--font-size-m);
}

.font-size\:m-sm {
  font-size: var(--font-size-m-sm);
}

.font-size\:s {
  font-size: var(--font-size-s);
}

.font-weight\:bold {
  font-weight: var(--font-weight-bold);
}

.font-weight\:400 {
  font-weight: 400;
}

.font-weight\:600 {
  font-weight: 600;
}

.text-decoration\:underline {
  text-decoration: underline;
}

.text-decoration\:none {
  text-decoration: none;
}

.font-style\:italic {
  font-style: italic;
}

.color\:inherit {
  color: inherit;
}

.color\:inactive {
  color: var(--color-inactive);
}

.border\:0 {
  border: 0;
}

.border-bottom-thin {
  border-bottom: var(--border-thin) solid var(--color-grey);
}

.border-radius\:btn {
  border-radius: 2.5em;
}

.border-color\:dark {
  border-color: var(--color-dark);
}

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

.touch-action\:none {
  touch-action: none;
}

.opacity\:0 {
  opacity: 0;
}

/* Color Styles
 * Ideally these classes can be generated from a
 * design token config file.
 */

.bg-primary {
  background: #ff00ff;
}

.bg-secondary {
  background: #ffbf81;
}

.bg-gray {
  background-color: var(--color-grey);
}

.color-primary {
  color: #ff00ff;
}

.color-secondary {
  color: #ffbf81;
}

.color-unsolved {
  color: #6C756C;
}