body {
  .be-settings {
    &::before {
      content: "";
      position: fixed;
      width: var(--auto-hide-sidebar-width, 8px);
      height: 100vh;
      top: 0;
      left: 0;
    }

    > .sidebar {
      transition: transform 0.2s ease-out;
    }
    &:not(:hover) > .sidebar {
      transform: translateX(calc(-100% * var(--direction))) translateY(-50%);
    }
  }

  &.settings-panel-dock-right .be-settings::before {
    left: unset;
    right: 0;
  }
}
