@use '../../compiled/tokens/scss/brightness';
@use '../../compiled/tokens/scss/color';
@use '../../compiled/tokens/scss/ease';
@use '../../compiled/tokens/scss/font-weight';
@use '../../compiled/tokens/scss/line-height';
@use '../../compiled/tokens/scss/size';
@use '../../compiled/tokens/scss/transition';
@use '../../mixins/ms';
@use '../../mixins/theme';
@use 'sass:color' as sasscolor;
@use 'sass:math';

///
/// 1. Because the text in a badge does not wrap, we can avoid icons
///    accidentally increasing the height as often by setting this here instead
///    of relying on vertical padding.
/// 2. We only apply half padding because the padding feels too tight around
///    icons but not around the label content. We'll apply the other half of
///    padding on the content element itself.
///
.c-badge {
  align-items: center;
  background: var(--theme-color-background-secondary);
  block-size: ms.step(2); // 1
  border-radius: size.$border-radius-medium;
  color: var(--theme-color-text-muted);
  display: inline-flex;
  font-size: ms.step(-1);
  font-weight: font-weight.$medium;
  line-height: line-height.$tighter;
  padding: 0 math.div(size.$padding-cell-horizontal, 2); // 2
  text-decoration: none;
  transition: filter transition.$slow ease.$out;
  vertical-align: middle;
  white-space: nowrap;
}

///
/// When badges are links, we want to saturate their appearance a bit and add
/// some basic pointer effects.
///
a.c-badge {
  // I just wasn't happy with the light gray on its own, but I didn't think this
  // color was versatile enough to make available as a token.
  background-color: sasscolor.change(color.$brand-primary-lighter, $alpha: 0.2);
  color: var(--theme-color-text-action);

  &:hover {
    filter: brightness(brightness.$control-brighten);
  }

  &:active {
    filter: brightness(brightness.$control-dim);
  }
}

.c-badge__content {
  &:first-child {
    padding-inline-start: math.div(size.$padding-cell-horizontal, 2);
  }

  &:last-child {
    padding-inline-end: math.div(size.$padding-cell-horizontal, 2);
  }
}

.c-badge__extra {
  align-items: center;
  display: flex;
  flex: none;
  justify-content: center;
  min-inline-size: ms.step(2);
}