body:not(.is-mobile).hover-sidedock {
  &:not(.stacked-nav-off) .mod-sidedock.mod-left-split.is-sidedock-collapsed .mod-top-left-space .workspace-tab-header-container {
    padding-top: var(--header-height);
  }

  &.layout-frame {
    .mod-sidedock.mod-left-split.is-sidedock-collapsed:not([style*="overflow: hidden;"]) {
      margin: -4px 0 0 -4px;
      border: none;
    }
    .mod-sidedock.mod-right-split.is-sidedock-collapsed:not([style*="overflow: hidden;"]) {
      margin: -4px -4px 0 0;
      border: none;
    }
  }

  .mod-sidedock .workspace-tab-header-container {
    -webkit-app-region: no-drag !important;
  }

  .mod-sidedock {
    transition: var(--anim-duration-moderate) var(--anim-motion-baseline), transform var(--anim-duration-moderate), background-color var(--anim-duration-moderate) !important;
  }
  .mod-sidedock.is-sidedock-collapsed {
    z-index: var(--layer-sidedock);

    &:not([style*="overflow: hidden;"]) {
      display: flex !important;
      position: absolute;
      transition-delay: var(--hover-sidedock-delay, var(--anim-duration-fast));
      height: -webkit-fill-available;
      width: var(--hover-sidedock-width, 320px) !important;
      opacity: 0;
      background-color: transparent;

      &:hover {
        opacity: 1;
        transform: none;
        filter: none;

        ~ .mod-root .workspace-tab-header-container,
        ~ .mod-root .workspace-tab-header-container-inner,
        &:has(~ .mod-root .workspace-tab-header-container),
        &:has(~ .mod-root .workspace-tab-header-container-inner) {
          -webkit-app-region: no-drag;
        }

        div {
          pointer-events: revert-layer;
        }
      }

      div {
        visibility: visible !important;
        pointer-events: none;
        -webkit-app-region: no-drag !important;
      }
      .workspace-tab-header-container {
        background-color: transparent;
      }
      > .workspace-leaf-resize-handle {
        display: none;
      }
    }

    &::before {
      inset: -100% 0;
      width: 150%;
      content: "";
      position: absolute;
      background: linear-gradient(to right, rgba(var(--mono-rgb-0)) 0%, rgba(var(--mono-rgb-0), 0.99) 18.4%, rgba(var(--mono-rgb-0), 0.963) 33.7%, rgba(var(--mono-rgb-0), 0.92) 46.4%, rgba(var(--mono-rgb-0), 0.864) 56.7%, rgba(var(--mono-rgb-0), 0.796) 64.8%, rgba(var(--mono-rgb-0), 0.72) 71.2%, rgba(var(--mono-rgb-0), 0.637) 76.1%, rgba(var(--mono-rgb-0), 0.55) 79.9%, rgba(var(--mono-rgb-0), 0.46) 82.8%, rgba(var(--mono-rgb-0), 0.37) 85.2%, rgba(var(--mono-rgb-0), 0.283) 87.3%, rgba(var(--mono-rgb-0), 0.2) 89.6%, rgba(var(--mono-rgb-0), 0.124) 92.3%, rgba(var(--mono-rgb-0), 0.056) 95.6%, rgba(var(--mono-rgb-0), 0) 100%);
      pointer-events: none;
    }
    &::after {
      inset: 0 0 0 -100%;
      content: "";
      position: absolute;
      width: 100%;
      background: red;
    }

    &.mod-left-split:not(:hover) {
      transform: translateX(calc(-1 * calc(var(--hover-sidedock-width, 320px) - var(--hover-sidedock-trigger-area, 8px))));
    }
    &.mod-right-split:not(:hover) {
      transform: translateX(calc(var(--hover-sidedock-width, 320px) - var(--hover-sidedock-trigger-area, 8px)));
    }

    &.mod-right-split {
      right: 0;
    }
    &.mod-right-split::before {
      left: unset;
      background: linear-gradient(to left, rgba(var(--mono-rgb-0)) 0%, rgba(var(--mono-rgb-0), 0.99) 18.4%, rgba(var(--mono-rgb-0), 0.963) 33.7%, rgba(var(--mono-rgb-0), 0.92) 46.4%, rgba(var(--mono-rgb-0), 0.864) 56.7%, rgba(var(--mono-rgb-0), 0.796) 64.8%, rgba(var(--mono-rgb-0), 0.72) 71.2%, rgba(var(--mono-rgb-0), 0.637) 76.1%, rgba(var(--mono-rgb-0), 0.55) 79.9%, rgba(var(--mono-rgb-0), 0.46) 82.8%, rgba(var(--mono-rgb-0), 0.37) 85.2%, rgba(var(--mono-rgb-0), 0.283) 87.3%, rgba(var(--mono-rgb-0), 0.2) 89.6%, rgba(var(--mono-rgb-0), 0.124) 92.3%, rgba(var(--mono-rgb-0), 0.056) 95.6%, rgba(var(--mono-rgb-0), 0) 100%);
    }
    &.mod-right-split::after {
      left: unset;
      right: -100%;
    }
  }
}
