Collapsible sidebar menu for New-New Reddit by regs01

/* ==UserStyle==
@name           Collapsible sidebar menu for New-New Reddit
@namespace      github.com/regs01/usercss
@version        1.0.1
@description    Collapsible sidebar menu for desktop New-New Reddit by mouse hover
@author         coth
==/UserStyle== */

@-moz-document domain("new.reddit.com"), domain("reddit.com") {
  
  @media (min-width: 1200px) {
  
    reddit-header-large {
      z-index: 1001 !important;
    }

    div.left-sidebar {
      position: sticky !important;
      width: 32px !important;
      z-index: 1000 !important;
      transition: width 120ms ease 0s !important;
    }

    div.left-sidebar:not(:hover) > reddit-sidebar-nav > nav {
      display: none !important;
    }
    div.left-sidebar:not(:hover) > reddit-sidebar-nav {
      padding-right: 5pt !important;
      overflow-y: hidden !important;
    }

    div.left-sidebar:not(:hover) > reddit-sidebar-nav::before {
      content: '>' !important;
      float: right !important;
      vertical-align: middle !important;
      font-size: 24pt !important;
      font-family: monospace !important;
    }

    div.left-sidebar:hover {
      position: sticky !important;
      width: 272px !important;
      box-shadow: 10px 0px 10px -10px rgb(209, 209, 209) !important;
      clip-path: inset(0px -16px 0px 0px) !important;
      z-index: 1002 !important;
      transition: width 200ms ease 0s !important;
    }

    div.left-sidebar:hover > reddit-sidebar-nav > nav {
      display: block !important;
    }
    div.left-sidebar:hover > reddit-sidebar-nav {
      overflow-y: scroll !important;
      padding: 5pt !important;
    }

    div.grid.grid-container {
      grid-template-columns: 38px 1fr !important;
      width: 100vw !important;
    }
    div.grid.grid-container > .subgrid-container {
      width: calc(100vw - 32px - 16px) !important;
      max-width: calc(100vw - 32px - 16px) !important;
    }

    div.grid.grid-container > .subgrid-container > .main-container,
    div.grid.grid-container > .subgrid-container > .main-container > .main {
      max-width: unset !important;
    }
    div.grid.grid-container > .subgrid-container > .main-container > .main {
      width: calc(100% - 316px) !important;
      max-width: calc(100% - 316px) !important;
    }
    
    .mx-auto {
      margin: 0px !important;
    }
    
    .main:not(:has(shreddit-feed)) shreddit-post {
      padding-left: 2.75rem !important;
      padding-right: 2.75rem !important;
    } 

  }
  
}