/*
* 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 https://mozilla.org/MPL/2.0/.
*/

:root:not([titlepreface*="="], [inDOMFullscreen="true"]) {
  --uc-content-margin-top: 0px !important;
}

@media not (-moz-platform: macos) {
  :root[sizemode="fullscreen"]:not([inDOMFullscreen="true"])
    #navigator-toolbox {
    margin-top: 0px !important;
  }
}
@media (-moz-platform: macos) {
  #navigator-toolbox[style*="transform: translateY"] {
    background-color: var(--uc-bg) !important;
  }
}

#nav-bar,
#navigator-toolbox {
  border: none !important;
  box-shadow: none !important;
}

#nav-bar {
  margin-inline: var(--uc-sidebar-margin) !important;
}

.toolbarbutton-icon {
  border-radius: var(--uc-radius) !important;
}

/* fix margin for buttons on the sides */
#PanelUI-menu-button {
  padding: 0 var(--toolbarbutton-outer-padding) !important;
}
#nav-bar-customization-target > :is(toolbarbutton, toolbaritem):first-child,
#nav-bar-customization-target
  > toolbarpaletteitem:first-child
  > :is(toolbarbutton, toolbaritem) {
  padding-inline-start: 0px !important;
}

#main-window[titlepreface*="="]:not([inDOMFullscreen="true"]) {
  --nav-width: clamp(400px, 75vw, 1000px);
  --nav-height: 38px;
  &[uidensity="compact"] {
    --nav-height: 34.5px;
  }

  #urlbar-container {
    width: unset !important;
  }

  #navigator-toolbox {
    position: absolute !important;

    width: var(--nav-width) !important;
    height: var(--uc-content-margin) !important;
    left: calc(50vw - var(--nav-width) * 0.5) !important;
    right: auto !important;

    border-radius: var(--uc-radius) !important;
    background-color: transparent !important;

    &::before {
      content: "";
      position: absolute;
      top: calc(var(--uc-content-margin) * 0.25) !important;
      width: 100%;
      height: calc(var(--uc-content-margin) * 0.5) !important;
      background-color: var(--uc-panel-hint) !important;
      border-radius: var(--uc-radius) !important;
      transition: opacity var(--uc-transition) !important;
    }
  }

  #nav-bar {
    min-height: unset !important;
    max-height: unset !important;
    height: var(--nav-height) !important;
    margin-top: calc(-1 * (var(--nav-height) + var(--uc-content-margin)));

    transition: margin-top var(--uc-transition) !important;
    will-change: margin-top !important;
    border-radius: var(--uc-radius) !important;
  }

  &[customizing] {
    & #customization-content-container {
      margin-top: var(--nav-height) !important;
    }
    & #nav-bar {
      top: var(--uc-content-margin-top) !important;
      border: 1px solid var(--toolbarbutton-icon-fill) !important;
    }
  }

  &:not([customizing]) {
    #toolbar-menubar {
      display: none !important;
    }

    #nav-bar {
      width: 100% !important;
      background-color: var(--uc-bg-opaque) !important;
      z-index: 100 !important;

      toolbarspring {
        flex-grow: 0 !important;
      }

      #nav-bar-customization-target > *,
      #nav-bar-overflow-button,
      #PanelUI-button {
        opacity: 0 !important;
      }
    }

    &:has(
        #navigator-toolbox:hover,
        #nav-bar-customization-target:hover,
        #PanelUI-button:hover,
        #urlbar:focus-within,
        #urlbar[breakout][breakout-extend],
        #nav-bar-overflow-button[open],
        #nav-bar-overflow-button:hover,
        #nav-bar-customization-target toolbarbutton[open="true"]
      ) {
      #nav-bar {
        margin-top: calc(2 * var(--uc-content-margin-top)) !important;

        #nav-bar-customization-target > *:not([disabled="true"]),
        #nav-bar-overflow-button,
        #PanelUI-button:not([disabled="true"]) {
          opacity: 1 !important;
        }
        #nav-bar-customization-target > *[disabled="true"],
        #PanelUI-button[disabled="true"] {
          opacity: 0.5 !important;
        }
      }
      #navigator-toolbox {
        height: calc(
          2 * var(--uc-content-margin) + var(--nav-height)
        ) !important;
        z-index: 99 !important;

        &::before {
          opacity: 0 !important;
        }
      }
    }
  }
}
