@include Option("userChromeJS.Sidra.Sidebar.Compact") {
  #sidebar-box {
    --sidebar-background-color: var(--toolbar-bgcolor);
  }
  [appname="Floorp"] #sidebar-select-box {
    background-color: var(--toolbar-bgcolor) !important;
  }
  #sidebar-header {
    background-color: var(--sidebar-background-color);
  }
  #sidebar-search-container {
    margin: 8px;
    @include OS("mac") {
      margin: 4px;
    }
    border: 1px solid var(--arrowpanel-border-color);
    padding: 0 !important;
    overflow: hidden;

    #search-box {
      appearance: none !important;
      padding: 5px 8px !important;
    }
  }
  #SM_splitter {
    position: relative;
    width: var(--uc-appcontent-spliter-width, 4px);
    min-width: 1px !important;
    background-color: transparent !important;
    background-image: none !important;
    border-inline-width: 1px 0;
    opacity: 0;
    &[open="true"] {
      --offset: calc(0 - var(--uc-appcontent-spliter-width, 4px));
      &:not([positionend="true"]) {
        left: var(--offset);
      }
      &[positionend="true"] {
        right: var(--offset);
      }
    }
  }
  #SM_header {
    padding: 8px;
    font-size: 1.333em;
  }
  #SM_header_toolbar {
    padding-inline: 0;
  }
  :root[uidensity="compact"] {
    #sidebar-header,
    #SM_header {
      padding: 4px !important;
    }
  }
  @include Option("userChromeJS.Sidra.Sidebar.AutoHide.Enabled") {
    #sidebar-box {
      --uc-sidebar-width: 36px;
      --uc-sidebar-hover-width: 280px;
      --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */
      --uc-autohide-transition-duration: 115ms;
      --uc-autohide-transition-type: linear;
      position: relative;
      min-width: var(--uc-sidebar-width) !important;
      width: var(--uc-sidebar-width) !important;
      max-width: var(--uc-sidebar-width) !important;
      z-index: 1;
    }

    #sidebar-box[positionend] {
      direction: rtl;
    }
    #sidebar-box[positionend] > * {
      direction: ltr;
    }

    #sidebar-box[positionend]:-moz-locale-dir(rtl) {
      direction: ltr;
    }
    #sidebar-box[positionend]:-moz-locale-dir(rtl) > * {
      direction: rtl;
    }

    #main-window[sizemode="fullscreen"] #sidebar-box {
      --uc-sidebar-width: 1px;
    }

    #sidebar-splitter {
      display: none;
    }

    #sidebar-header {
      overflow: hidden;
      color: var(--chrome-color, inherit) !important;
      padding-inline: 0 !important;
    }

    #sidebar-header::before,
    #sidebar-header::after {
      content: "";
      display: flex;
      padding-left: 8px;
    }

    #sidebar-header,
    #sidebar {
      @include NotOption("userChromeJS.Sidra.Sidebar.AutoHide.Blur.Enabled") {
        transition: min-width var(--uc-autohide-transition-duration)
          var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
      }
      @include Option("userChromeJS.Sidra.Sidebar.AutoHide.Blur.Enabled") {
        transition:
          min-width var(--uc-autohide-transition-duration)
            var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay),
          filter var(--uc-autohide-transition-duration)
            var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
      }
      min-width: var(--uc-sidebar-width) !important;
      will-change: min-width;
    }
    #sidebar-box:hover > #sidebar-header,
    #sidebar-box:hover > #sidebar {
      min-width: var(--uc-sidebar-hover-width) !important;
      transition-delay: 0ms !important;
    }
    @include Option("userChromeJS.Sidra.Sidebar.AutoHide.Blur.Enabled") {
      #sidebar-box:not(:hover, :active, :focus-within) > #sidebar {
        filter: blur(4px);
      }
    }
    .sidebar-panel {
      background-color: transparent !important;
      color: var(--newtab-text-primary-color) !important;
    }

    .sidebar-panel #search-box {
      -moz-appearance: none !important;
      background-color: rgba(249, 249, 250, 0.1) !important;
      color: inherit !important;
    }

    /* Add sidebar divider and give it background */
    #sidebar,
    #sidebar-header {
      border-inline: 1px solid
        var(--uc-appcontent-border-color, rgb(80, 80, 80));
      border-inline-width: 0px 1px;
    }

    #sidebar-header {
      border-top: 1px solid var(--uc-appcontent-border-color, rgb(80, 80, 80));
    }

    #sidebar {
      background-color: inherit !important;
    }

    #sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
    #sidebar-box[positionend] > * {
      border-inline-width: 1px 0px;
    }

    /* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

    #sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel {
      inset-inline: auto 0px !important;
    }
    #sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label {
      margin-inline: 0px !important;
      border-left-style: solid !important;
    }
  }

  @include Option("userChromeJS.Sidra.Sidebar.Modoki.AutoHide.Enabled") {
    #browser:has(#SM_toolbox[open="true"]) {
      position: relative;
    }
    #SM_toolbox[open="true"][style*="--width"] {
      --uc-autohide-sidebar-delay: 600ms; /* Wait 0.6s before hiding sidebar */
      --uc-autohide-transition-duration: 115ms;
      --uc-autohide-transition-type: linear;
      --sidebar-background-color: transparent;
      transition: width var(--uc-autohide-transition-duration)
        var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay);
      will-change: width;
      position: absolute;
      height: 100%;
      top: 0;
      z-index: 1;
      border-top: 1px solid var(--uc-appcontent-border-color, rgb(80, 80, 80));
      min-width: unset;
      > #SM_content {
        width: calc(100% - var(--width));
      }
      &:not([positionend="true"]) {
        border-right: 1px solid
          var(--uc-appcontent-border-color, rgb(80, 80, 80));
        left: 0;
        &:not([moz-collapsed]) ~ #appcontent {
          margin-inline-start: 34px;
        }
      }
      &[positionend="true"] {
        right: 0;
        &:not([moz-collapsed]) ~ #appcontent {
          margin-inline-end: 34px;
        }
      }
      &:not(:hover, [disiable-auto-hide="true"]) {
        --width: 34px !important
      ;
      }
      & ~ #SM_splitter {
        visibility: collapse;
      }
    }

    #SM_toolbox[positionend="true"] {
      border-left: 1px solid var(--uc-appcontent-border-color, rgb(80, 80, 80));
    }
  }
}
