/* Utility classes */

/* Hide elements on mobile, show on tablet and larger */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: table-cell;
  }
}

.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-1 {
  flex: 1;
}
.flex-wrap {
  flex-wrap: wrap;
}
.justify-content-center {
  justify-content: center;
}
.place-self-center {
  place-self: center;
}
.items-center {
  align-items: center;
}
.text-center {
  text-align: center;
}

.text-positive {
  color: var(--wa-color-success-on-quiet);
}
.text-negative {
  color: var(--wa-color-danger-on-quiet);
}
.text-muted {
  color: var(--wa-color-neutral-500);
}

[class*="min-max-grid"] {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--min-column-size, 20ch), 100%), var(--max-column-size))
  );
  --min-column-size: initial;
  --max-column-size: 1fr;
}

/*TODO: Better name for this*/
.span-mobile {
  --max-column-size: 0.33fr;
}
@media (max-width: 640px) {
  .span-mobile {
    --min-column-size: 1fr;
  }
}