.pad-block-end {
  padding-block-end: var(--block-space);
}


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

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


.flex {
  display: flex;
}

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

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

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

.flex-justify-start {
  justify-content: flex-start;
}

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

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

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

.flex-shrink-0 {
  flex-shrink: 0;
}

.gap {
  column-gap: var(--column-gap, var(--inline-space));
  row-gap: var(--row-gap, var(--block-space));
}

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

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

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

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

.text-tiny {
  font-size: var(--font-size-xs);
}

.badge:empty {
  display: none;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.7em;
  border-radius: 999px;
  font-size: var(--font-size-xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
  background-color: var(--label-bg);
  color: var(--color-text);

  a {
    text-decoration: none;
    color: inherit;
  }

  &.badge--red {
    background-color: var(--color-red-muted);
    color: var(--color-red);
  }

  &.badge--green {
    background-color: var(--color-green-muted);
    color: var(--color-green);
  }

  &.badge--blue {
    background-color: var(--color-blue-muted);
    color: var(--color-blue);
  }

  &.badge--orange {
    background-color: var(--color-orange-muted);
    color: var(--color-orange);
  }

  &.badge--yellow {
    background-color: var(--color-yellow-muted);
    color: var(--color-yellow);
  }
}