.stopping-pattern {
  display: flex;
}

.stopping-pattern.col-2 .stop-column {
  width: 50%;
}

.stopping-pattern.col-3 .stop-column {
  width: 33.333%;
}

.stopping-pattern.col-4 .stop-column {
  width: 25%;
}

.stopping-pattern.col-5 .stop-column {
  width: 20%;
}

.stopping-pattern > .stop-column:first-child > .station-row:nth-child(2) > .station-row-name {
  background-color: var(--line-colour);
  color: var(--text-colour);
}

.stop-continuation-marker {
  height: var(--stop-continuation-marker-height);
  width: var(--stop-column-width);
  background-color: var(--line-colour);
}

.station-row {
  display: flex;
}

.column-backing {
  height: 100%;
  width: var(--stop-column-width);
  background-color: var(--line-colour);
}

.column-bullet-container {
  display: flex;
  align-items: center;
  margin-right: var(--stop-column-margin-right);
}

.station-row.stopping .column-bullet {
  height: var(--column-bullet-height);
  width: var(--column-bullet-width);
  background-color: var(--line-colour);
}

.station-row.express .column-bullet {
  width: var(--column-bullet-width);
}

.station-row.express.express-arrow .column-bullet, .station-row.express.express-arrow .column-bullet::before {
  position: absolute;
  height: var(--arrow-length);
  width: var(--arrow-length);

  border-left: var(--arrow-thickness) solid var(--arrow-colour);
  border-bottom: var(--arrow-thickness) solid var(--arrow-colour);

}

.station-row.express.express-arrow .column-bullet {
  transform: translateY(var(--arrow-margin-top)) translateY(calc(var(--arrow-thickness) * 0.5)) translateX(calc(var(--stop-column-width) / 2)) rotate(-45deg);
  transform-origin: bottom left;

  --arrow-colour: var(--pid-background);
}

.station-row.express.express-arrow .column-bullet::before {
  content: "";
  transform:  translateX(calc(var(--arrow-thickness) * -1)) rotate(45deg) translateY(calc(var(--arrow-thickness) * -1)) rotate(-45deg);
  transform-origin: bottom left;

  --arrow-colour: var(--line-colour);
}

.station-row-name {
  padding: calc(var(--height) * 0.004) calc(var(--width) * 0.003);
}

.station-row.express .station-row-name {
  color: #a8a8a8;
}

.station-row.express-arrow .station-row-name {
  margin-left: var(--column-bullet-width);
}

.stopping-pattern > .stop-column:first-child > .stop-continuation-marker:first-child {
  background: var(--line-colour);
}

.stopping-pattern > .stop-column > .stop-continuation-marker {
  --dot-height: 25%;
  background: repeating-linear-gradient(to bottom, var(--line-colour) 0, var(--line-colour) calc(var(--dot-height) * 1), transparent calc(var(--dot-height) * 1), transparent calc(var(--dot-height) * 2));
}

.stopping-pattern > .stop-column > .stop-continuation-marker:last-child {
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--dot-height) * 1), var(--line-colour) calc(var(--dot-height) * 1), var(--line-colour) calc(var(--dot-height) * 2));
}

.stopping-pattern > .stop-column:last-child > .stop-continuation-marker:last-child {
  background: none;
}

.stopping-pattern > .stop-column:last-child > .station-row:nth-last-child(2) .column-backing {
  background: linear-gradient(to bottom, var(--line-colour) 0, var(--line-colour) 50%, transparent 50%, transparent 100%);
}

.stopping-pattern > .stop-column:last-child > .station-row:nth-last-child(2) .column-bullet {
  position: absolute;
  width: calc(var(--column-bullet-width) * 2 + var(--stop-column-width));
  margin-left: calc(var(--column-bullet-width) * -1);
}

.stopping-pattern > .stop-column:last-child > .station-row:nth-last-child(2) .station-row-name {
  margin-left: var(--column-bullet-width);
}

.station-row.continuation .column-backing {
  --dot-height: 12%;
  background: repeating-linear-gradient(to bottom, var(--line-colour) 0, var(--line-colour) calc(var(--dot-height) * 1), transparent calc(var(--dot-height) * 1), transparent calc(var(--dot-height) * 2));
}

.station-row.continuation .station-row-name {
  margin-left: var(--column-bullet-width);
  font-style: italic;
  font-weight: 100;
}