.xh-resizable-splitter {
  background-color: var(--xh-resizable-bg);
  justify-content: center;
  align-items: center;

  .xh-resizable-collapser-btn {
    color: var(--xh-resizable-button-icon-color) !important;
    margin: 0;
    padding: 0;
    z-index: 10;
  }

  &.vertical {
    height: var(--xh-resizable-size-px);
    border-top: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
    border-bottom: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);

    .xh-resizable-collapser-btn {
      width: 50px;
      height: 10px;
      background-color: var(--xh-resizable-button-bg) !important;
      border-left: 1px solid var(--xh-resizable-border-color) !important;
      border-right: 1px solid var(--xh-resizable-border-color) !important;
    }
  }

  &.horizontal {
    width: var(--xh-resizable-size-px);
    border-left: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);
    border-right: var(--xh-resizable-border-width-px) solid var(--xh-resizable-border-color);

    .xh-resizable-collapser-btn {
      width: 10px;
      height: 50px;
      background-color: var(--xh-resizable-button-bg) !important;
      border-bottom: 1px solid var(--xh-resizable-border-color) !important;
      border-top: 1px solid var(--xh-resizable-border-color) !important;
    }
  }
}