/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/*
  Enhanced by Prit Cee (@pritceeart)
  This customization is shared under the Mozilla Public License v. 2.0.
  Feel free to use, adapt, and elevate as needed. No support is provided, and your creativity is the limit.
  Kindly respect the original license by MrOtherGuy.
*/
@media (-moz-bool-pref:"af.edgyarc.sidebar-always-collapsed") {
  :root, :root[titlepreface="᠎"] { 
    #sidebar-box {
  --uc-sidebar-hover-width: 48px !important;
  }
  }
}

@media (-moz-bool-pref:"af.edgyarc.autohide-sidebar") {
      :root[titlepreface="᠎"] { 
    #sidebar-box {
  --uc-sidebar-width: 8px !important;
  }
  
  }
}

/* Apply styles only when toggled using the userchrome toggle addon */
:root[titlepreface="᠎"] {
  #sidebar-box {
    --uc-sidebar-width: 48px;
    --uc-autohide-sidebar-delay: 0ms !important; 
    --uc-autohide-transition-duration: 100ms;
    --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;
    @media not (-moz-bool-pref:"uc.tweak.af.sidebar-width-350") {--uc-sidebar-hover-width: 260px;}
    @media (-moz-bool-pref:"uc.tweak.af.sidebar-width-350") {--uc-sidebar-hover-width: 350px;}
  }

  #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 }

  #sidebar-splitter {
    width: 10px !important;
    visibility: collapse;
  }

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

  #sidebar-box:hover > #sidebar-header,
  #sidebar-box:hover > #sidebar {
    min-width: var(--uc-sidebar-hover-width) !important;
    max-width: var(--uc-sidebar-hover-width) !important;
    transition: min-width var(--uc-autohide-transition-duration) var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay), box-shadow var(--uc-autohide-transition-duration) ease-in-out var(--uc-autohide-sidebar-delay) !important;
  }

  .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 {
    background-color: inherit !important;
    border-inline: 0px;
    border-inline-width: 0px 0px;
  }

  #sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
  #sidebar-box[positionend] > * {
    border-inline-width: 0px 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;
  }
}