How to set the splitpanes split line style to a grey solid line?

Question

I follow the splitpanes tutorial, get two panes with the split line:

But I want to have the split line style like below, a grey solid line.

I also follow the tutorial, set the custom CSS for splitpanes, but do not work, my code is below:

<script setup>

import { Splitpanes, Pane } from 'splitpanes' 
import 'splitpanes/dist/splitpanes.css'

</script>

<template>
  <div class="w-screen h-screen">
    
    <Splitpanes class="default-theme" horizontal style="height:100%;">
      <Pane size="100%;">
          <span>1</span>
        </Pane>
        <Pane size="5" min-size="5" max-size="5">
          <span>2</span>
        </Pane>
    </Splitpanes>

  </div>
  
</template> 

<style scoped>
.splitpanes {background-color: #f8f8f8;}

.splitpanes__splitter {background-color: #ccc;position: relative;}
.splitpanes__splitter:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  transition: opacity 0.4s;
  background-color: rgba(255, 0, 0, 0.3);
  opacity: 0;
  z-index: 1;
}
.splitpanes__splitter:hover:before {opacity: 1;}
.splitpanes--vertical > .splitpanes__splitter:before {left: -30px;right: -30px;height: 100%;}
.splitpanes--horizontal > .splitpanes__splitter:before {top: -30px;bottom: -30px;width: 100%;}
</style>