/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* Base Variables */
:root {
  --panel-sidebar-width: 42px;
  --panel-sidebar-compact-width: 35px;
  --panel-sidebar-touch-width: 60px;
  --panel-icon-size: 16px;
  --panel-touch-icon-size: 20px;
  --panel-sidebar-panel-size: 36px;
  --panel-sidebar-actions-size: 32px;
  --panel-sidebar-header-height: 38px;
  --panel-sidebar-splitter-width: 4px;
  --panel-sidebar-floating-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  --panel-sidebar-floating-radius: 8px;
  --panel-sidebar-floating-margin: 10px 15px;
  --panel-sidebar-floating-splitter-size: 10px;
  --panel-sidebar-floating-corner-size: 16px;

  &[uidensity="compact"] {
    --panel-sidebar-panel-size: unset;
  }

  &[uidensity="touch"] {
    --panel-sidebar-panel-size: 55px;
  }
}

/* Panel Sidebar Select Box */
#panel-sidebar-select-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: var(--panel-sidebar-width);
  max-width: var(--panel-sidebar-width);
  min-width: var(--panel-sidebar-width);
  color: var(--toolbar-color);
  background-color: var(--panel-sidebar-background-color);
  background-image: var(--lwt-additional-images);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  scrollbar-width: thin;
  border-inline: 1px solid var(--chrome-content-separator-color);
  overflow-y: auto;
}

#panel-sidebar-select-box:-moz-lwtheme {
  background-color: var(
    --lwt-accent-color-inactive,
    var(--panel-sidebar-background-color)
  );
}

/* Panel Sidebar Box */
#panel-sidebar-box {
  background: var(--panel-sidebar-background-color);
  min-width: 225px;
}

/* Panel Sidebar Splitter */
#panel-sidebar-splitter {
  margin-inline: 0;
  border-color: transparent;
}

#panel-sidebar-box[positionend] + .panel-sidebar-splitter {
  border-color: transparent;
}

#panel-sidebar-box,
#panel-sidebar-splitter {
  display: var(--panel-sidebar-display);
}

/* Webpanel Icon */
.webpanel-icon::before {
  content: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
  position: fixed;
  inset: 3px 3px auto auto;
  opacity: 0.5;
  fill: inherit;
  background: none;
  display: none;
}

.webpanel-icon[muted]::before {
  display: inherit;
}

/* Common Button Styles */
.panel-sidebar-panel,
.panel-sidebar-icon,
.panel-sidebar-actions {
  appearance: none;
  -moz-context-properties: fill, fill-opacity;
  border-radius: 4px;
  color: inherit;
  fill: currentColor;
}

/* Panel Sidebar Panel */
.panel-sidebar-panel {
  scale: 1;
  min-width: var(--panel-sidebar-panel-size);
  min-height: var(--panel-sidebar-panel-size);
  margin: 5px 1px 0;
}

.panel-sidebar-panel.dragging {
  opacity: 0.5;
}

.panel-sidebar-panel.drag-over {
  border: 2px solid highlight;
}

.panel-sidebar-panel > .toolbarbutton-icon {
  width: var(--panel-icon-size);
}

/* Fixed favicon size: 16x16 and centered with padding */
.panel-sidebar-panel > img,
.panel-sidebar-panel > .panel-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  object-position: center;
  display: block;
  margin: auto;
  padding: 0;
  box-sizing: border-box;
}

.panel-sidebar-panel > .toolbarbutton-text {
  display: none;
}

.panel-sidebar-user-context-border {
  width: 2px;
  margin: 9px 0 3px;
  height: inherit;
  border-radius: 4px;
}

/* UI Density Variations */
:root[uidensity="compact"] {
  --panel-sidebar-width: var(--panel-sidebar-compact-width);
}

:root[uidensity="compact"] .panel-sidebar-panel {
  margin: 3.5px;
  padding: 5px;
}

:root[uidensity="touch"] {
  --panel-sidebar-width: var(--panel-sidebar-touch-width);
}

/* Header */
#panel-sidebar-header {
  height: var(--panel-sidebar-header-height);
  background-color: var(--panel-sidebar-background-color);
  background-image: var(--lwt-additional-images);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 0 6px;
}

/* Action Buttons */
.panel-sidebar-actions {
  padding: 8px;
  width: var(--panel-sidebar-actions-size);
  height: var(--panel-sidebar-actions-size);
}

/* Interactive States */
@media not (prefers-contrast) {
  .panel-sidebar-panel:hover,
  .panel-sidebar-actions:hover {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    background-color: var(
      --tab-selected-bgcolor,
      var(--panel-sidebar-background-color)
    );
  }

  .panel-sidebar-panel[data-checked="true"],
  .panel-sidebar-panel:not([data-checked="true"]):active,
  .panel-sidebar-panel:active,
  .panel-sidebar-actions:active {
    background-color: color-mix(in srgb, currentColor 20%, transparent);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
  }
}

@media (prefers-contrast) {
  .panel-sidebar-panel:hover {
    outline: 1px solid currentColor;
  }
}

/* Hidden States */
:is(
    :root[inDOMFullscreen],
    :root[inFullscreen]:not([macOSNativeFullscreen]),
    *|*:root[chromehidden~="toolbar"],
    :root[invisibleBMS]
  )
  #panel-sidebar-select-box {
  display: none;
}

:root[invisibleBMS] {
  max-width: 0;
  min-width: 0;
  border: unset;
}

/* Floating */

#browser {
  position: relative;
}

#panel-sidebar-box[data-floating="true"] {
  position: absolute;
  z-index: 999;
  box-shadow: var(--panel-sidebar-floating-shadow);
  border-radius: var(--panel-sidebar-floating-radius);
  margin: var(--panel-sidebar-floating-margin);
  overflow: hidden;
}

#panel-sidebar-box[data-floating="true"][data-floating-splitter-side="start"] {
  right: var(--panel-sidebar-width);
}

#panel-sidebar-box[data-floating="true"][data-floating-splitter-side="end"] {
  left: var(--panel-sidebar-width);
}

#panel-sidebar-splitter[data-floating="true"] {
  display: none;
}

#panel-sidebar-float {
  list-style-image: url("chrome://browser/skin/window.svg");
}

#panel-sidebar-box[data-floating="true"] #panel-sidebar-browser-box {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#panel-sidebar-box[data-floating="true"] {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

#panel-sidebar-browser-box-wrapper.warp {
  position: absolute;
  inset: 0;
  z-index: 9999;
  cursor: grabbing;
}

.floating-splitter-side {
  position: absolute;
  width: var(--panel-sidebar-floating-splitter-size);
  height: 100%;
  cursor: ew-resize;
  z-index: 1000;
  background: transparent;
}

.floating-splitter-side:hover {
  background-color: rgba(128, 128, 128, 0.2);
}

.floating-splitter-left {
  left: 0;
}

.floating-splitter-right {
  right: 0;
}

.floating-splitter-vertical {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--panel-sidebar-floating-splitter-size);
  cursor: ns-resize;
  z-index: 1000;
  background: transparent;
}

.floating-splitter-vertical:hover {
  background-color: rgba(128, 128, 128, 0.2);
}

.floating-splitter-top {
  top: 0;
}

.floating-splitter-bottom {
  bottom: 0;
}

.floating-splitter-corner {
  position: absolute;
  width: var(--panel-sidebar-floating-corner-size);
  height: var(--panel-sidebar-floating-corner-size);
  z-index: 1001;
  background: transparent;
}

.floating-splitter-corner:hover {
  background-color: rgba(128, 128, 128, 0.3);
}

.floating-splitter-corner-topleft {
  inset: 0 auto auto 0;
  cursor: nwse-resize;
}

.floating-splitter-corner-topright {
  inset: 0 0 auto auto;
  cursor: nesw-resize;
}

.floating-splitter-corner-bottomleft {
  inset: auto auto 0 0;
  cursor: nesw-resize;
}

.floating-splitter-corner-bottomright {
  inset: auto 0 0 auto;
  cursor: nwse-resize;
}

/* Icons */
#panel-sidebar-add {
  list-style-image: url("chrome://global/skin/icons/plus.svg");
}
#panel-sidebar-back {
  list-style-image: url("chrome://browser/skin/back.svg");
}
#panel-sidebar-forward {
  list-style-image: url("chrome://browser/skin/forward.svg");
}
#panel-sidebar-reload {
  list-style-image: url("chrome://global/skin/icons/reload.svg");
}
#panel-sidebar-go-index {
  list-style-image: url("chrome://browser/skin/home.svg");
}
#panel-sidebar-open-in-main-window {
  list-style-image: url("chrome://browser/skin/open.svg");
}
#panel-sidebar-close {
  list-style-image: url("chrome://global/skin/icons/close.svg");
}
#panel-sidebar-addons-icon {
  list-style-image: url("chrome://mozapps/skin/extensions/extension.svg");
}

#panel-sidebar-passwords-icon {
  list-style-image: url("chrome://browser/skin/login.svg");
}
#panel-sidebar-preferences-icon {
  list-style-image: url("chrome://global/skin/icons/settings.svg");
}

/* Child Windows */
#browser[data-is-child] > #panel-sidebar-select-box,
#browser[data-is-child] > #panel-sidebar-box,
#browser[data-is-child] > #sidebar-main,
#browser[data-is-child] > #sidebar-wrapper {
  display: none;
}

:root[chromehidden~="menubar"] .chromeclass-menubar,
:root[chromehidden~="directories"] .chromeclass-directories,
:root[chromehidden~="status"] .chromeclass-status,
:root[chromehidden~="extrachrome"] .chromeclass-extrachrome,
:root[chromehidden~="location"] .chromeclass-location,
:root[chromehidden~="location"][chromehidden~="toolbar"] .chromeclass-toolbar,
:root[chromehidden~="toolbar"] .chromeclass-toolbar-additional {
  display: none !important;
}

#after-splitter {
  max-width: var(--panel-sidebar-splitter-width);
}
