.q-splitter

  &__panel
    position: relative
    z-index: 0

    > .q-splitter
      width: 100%
      height: 100%

  &__separator
    background-color: $separator-color
    user-select: none
    position: relative
    z-index: 1

  &__separator-area > *
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)

  &--dark
    .q-splitter__separator
      background-color: $separator-dark-color

  &--vertical
    > .q-splitter__panel
      height: 100%
    &.q-splitter--active
      cursor: col-resize
    > .q-splitter__separator
      width: 1px
      > div
        left: -6px
        right: -6px
    &.q-splitter--workable > .q-splitter__separator
      cursor: col-resize

  &--horizontal
    > .q-splitter__panel
      width: 100%
    &.q-splitter--active
      cursor: row-resize
    > .q-splitter__separator
      height: 1px
      > div
        top: -6px
        bottom: -6px
    &.q-splitter--workable > .q-splitter__separator
      cursor: row-resize

  &__before, &__after
    overflow: auto