:root {
  --belt-width: 160px;
  --belt-height: 26px;
  --belt-radius: 6px;

  --bar-width: 40px;
  --bar-inset: 4px;
  --bar-radius: 4px;

  --stripe-width: 5px;
  --stripe-gap: 3px;
  --stripe-height-factor: 0.72;
}

.bjj-belt {
  width: var(--belt-width);
  height: var(--belt-height);
  border-radius: var(--belt-radius);
  display: inline-block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
  background: #999;
  background-image: linear-gradient(to bottom, rgba(255,255,255,.18), rgba(0,0,0,.18));
  vertical-align: middle;
  margin-right: 8px;
}

.bjj-belt__date {
  color: #646970;
  font-size: 12px;
  vertical-align: middle;
  white-space: nowrap;
}

.bjj-belt__bar {
  position: absolute;
  right: var(--bar-inset);
  top: var(--bar-inset);
  bottom: var(--bar-inset);
  width: var(--bar-width);
  border-radius: var(--bar-radius);
  background: #111;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.bjj-belt__bar::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--stripe-width);
  height: calc((100% - 2px) * var(--stripe-height-factor));
  border-radius: 1px;
  background: transparent;
}

.bjj-belt--black .bjj-belt__bar {
  background: #c01616;
}

.bjj-belt[data-stripes="0"] .bjj-belt__bar::after {
  background: transparent;
  box-shadow: none;
}

.bjj-belt[data-stripes="1"] .bjj-belt__bar::after {
  background: #f3f3f3;
  box-shadow: none;
}

.bjj-belt[data-stripes="2"] .bjj-belt__bar::after {
  background: #f3f3f3;
  box-shadow:
    calc((var(--stripe-width) + var(--stripe-gap)) * 1) 0 0 #f3f3f3;
}

.bjj-belt[data-stripes="3"] .bjj-belt__bar::after {
  background: #f3f3f3;
  box-shadow:
    calc((var(--stripe-width) + var(--stripe-gap)) * 1) 0 0 #f3f3f3,
    calc((var(--stripe-width) + var(--stripe-gap)) * 2) 0 0 #f3f3f3;
}

.bjj-belt[data-stripes="4"] .bjj-belt__bar::after {
  background: #f3f3f3;
  box-shadow:
    calc((var(--stripe-width) + var(--stripe-gap)) * 1) 0 0 #f3f3f3,
    calc((var(--stripe-width) + var(--stripe-gap)) * 2) 0 0 #f3f3f3,
    calc((var(--stripe-width) + var(--stripe-gap)) * 3) 0 0 #f3f3f3;
}

.bjj-belt--white  { background-color: #f2f2f2; }
.bjj-belt--blue   { background-color: #1f4bd6; }
.bjj-belt--purple { background-color: #6a2ad6; }
.bjj-belt--brown  { background-color: #6b3d1f; }
.bjj-belt--black  { background-color: #1b1b1b; }

.bjj-belt--white {
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

.abjj-team-preview__meta .bjj-belt {
  --belt-width: 136px;
  --belt-height: 22px;
  --belt-radius: 5px;
  --bar-width: 34px;
  --bar-inset: 3px;
  --bar-radius: 3px;
  --stripe-width: 4px;
  --stripe-gap: 3px;
  margin-right: 0;
  max-width: 100%;
}

/* Shared BJJ member-profile grade line. */
.abjj-personal-overview-grade-line { align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; min-width: 0; }
.abjj-personal-overview-grade-line .abjj-personal-overview-grade { align-items: center; display: flex; flex: 0 0 auto; min-width: 0; }
.abjj-personal-overview-grade-line .bjj-belt { margin-right: 0; max-width: 116px; }
.abjj-personal-overview-grade-line .bjj-belt__date { margin: 0; white-space: nowrap; }
@media (max-width: 480px) { .abjj-personal-overview-grade-line { flex-wrap: wrap; } }