@use 'sass:math' as math;

.pgh-emulated-flex-gap {
  --gap: 0.75rem;
  flex-wrap: wrap;
  margin-block: calc(-1 * var(--gap)) 0;
  margin-inline: 0 calc(-1 * var(--gap));
  width: calc(100% + var(--gap));

  > * {
    margin-block: var(--gap) 0;
    margin-inline: 0 var(--gap);
  }
}

@each $size in (8, 16, 24, 32, 40) {
  .square-#{$size} {
    width: (math.div($size, 16)) * 1rem !important;
    height: (math.div($size, 16)) * 1rem !important;
    line-height: (math.div($size, 16)) * 1rem !important;
  }
}

.text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}