:root{
    --divider-size: 6px;
    --min-left: 120px;
    --min-right: 120px;
  }

  .divider {
    width: var(--divider-size);
    background: var(--header-bg);
    cursor: col-resize;
    display: flex;
    flex: 0 0 var(--divider-size);
    height: 100%;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    -webkit-user-drag: none;
    position: relative;
    touch-action: pan-y;
  }

  .divider.hidden {
      display: none;
  }


  /* quirky and doesn't work in ff
  .divider:has(+ .docked) {
      display: block;
  }
  */


  /* visual grabber */
  .divider::before {
    content: "";
    display: block;
    width: 2px;
    height: 36px;
    border-radius: 2px;
    background: rgba(255,255,255,0.08);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
  }

  .divider:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(100,150,255,0.16);
  }


  /* tab is hidden by default */
  .grab-tab {
    display: none;
  }


  @media (hover: none) and (pointer: coarse) {
      .grab-tab {
          display: block;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 30px;
          height: 30px;
          border-radius: 0px 0px 8px 8px;
          border-left: 2px solid color-mix(in srgb, var(--header-bg) 90%, white);
          border-right: 2px solid color-mix(in srgb, var(--header-bg) 90%, white);
          border-bottom: 2px solid color-mix(in srgb, var(--header-bg) 95%, white);
          background-color: var(--header-bg);
          z-index: 100;
      }
  }