.segment {
  position: absolute;
  left: var(--seg-left);
  top: var(--seg-top);
  width: var(--seg-width);
  height: var(--seg-height);
  display: flex;
  align-items: center;
  z-index: 6;
}

.capLeft,
.capRight {
  flex: 0 0 var(--seg-cap-width);
  width: var(--seg-cap-width);
  height: var(--seg-height);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.center {
  flex: 1;
  margin: 0 -3px;
  height: var(--seg-center-height);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.bridge {
  &.upcoming {
    .capLeft {
      background-image: url('/assets/route-segment/bridge/bridge-upcoming-left.png');
    }
    .center {
      background-image: url('/assets/route-segment/bridge/bridge-upcoming-center.png');
    }
    .capRight {
      background-image: url('/assets/route-segment/bridge/bridge-upcoming-right.png');
    }
  }

  &.passed {
    .capLeft {
      background-image: url('/assets/route-segment/bridge/bridge-passed-left.png');
    }
    .center {
      background-image: url('/assets/route-segment/bridge/bridge-passed-center.png');
    }
    .capRight {
      background-image: url('/assets/route-segment/bridge/bridge-passed-right.png');
    }
  }

  &.revisit {
    .capLeft {
      background-image: url('/assets/route-segment/bridge/bridge-revisit-left.png');
    }
    .center {
      background-image: url('/assets/route-segment/bridge/bridge-revisit-center.png');
    }
    .capRight {
      background-image: url('/assets/route-segment/bridge/bridge-revisit-right.png');
    }

    filter: drop-shadow(0 0 0.5px rgba(200, 200, 200, 0.8));
  }
}

.tunnel {
  &.upcoming {
    .capLeft {
      background-image: url('/assets/route-segment/tunnel/tunnel-upcoming-left.png');
    }
    .center {
      background-image: url('/assets/route-segment/tunnel/tunnel-upcoming-center.png');
    }
    .capRight {
      background-image: url('/assets/route-segment/tunnel/tunnel-upcoming-right.png');
    }
  }

  &.passed {
    .capLeft {
      background-image: url('/assets/route-segment/tunnel/tunnel-passed-left.png');
    }
    .center {
      background-image: url('/assets/route-segment/tunnel/tunnel-passed-center.png');
    }
    .capRight {
      background-image: url('/assets/route-segment/tunnel/tunnel-passed-right.png');
    }
  }

  &.revisit {
    .capLeft {
      background-image: url('/assets/route-segment/tunnel/tunnel-revisit-left.png');
    }
    .center {
      background-image: url('/assets/route-segment/tunnel/tunnel-revisit-center.png');
    }
    .capRight {
      background-image: url('/assets/route-segment/tunnel/tunnel-revisit-right.png');
    }

    filter: drop-shadow(0 0 0.5px rgba(200, 200, 200, 0.8));
  }
}
