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

.brc--s { gap: var(--spacing-4); }
.brc--m { gap: var(--spacing-8); }

.brc__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-gray-500);
  cursor: pointer;
}

.brc__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
}
.brc--m .brc__link::after { bottom: 0; }
.brc--s .brc__link::after { bottom: 1px; }

.brc__link:hover,
.brc__link--hover { color: var(--color-gray-600); }

.brc__link:hover::after,
.brc__link--hover::after { opacity: 1; }

.brc__link:active,
.brc__link--active { color: var(--color-gray-700); }

.brc__link:active::after,
.brc__link--active::after { opacity: 0; }

.brc__current {
  color: var(--color-gray-200);
  cursor: default;
}
.brc__current::after { content: none; }

.brc__sep {
  flex: none;
  display: block;
  color: var(--color-gray-200);
}
.brc--m .brc__sep { width: 16px; height: 16px; stroke-width: 2.4; }
.brc--s .brc__sep { width: 12px; height: 12px; stroke-width: 3.2; }