: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);
}