/* This Source Code Form is subject to the terms of the Creative Commons
 * Attribution-NonCommercial-ShareAlike International License, v. 4.0.
 * If a copy of the CC BY-NC-SA 4.0 was not distributed with this
 * file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/
 * or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. */

/* controls modifications made in fullscreen and/or maximized mode.
for example the navbar is hidden in fullscreen,
so we need to adjust the position of the findbar, sidebar, etc.
we also need to adjust window controls, the main menu bar, and the bookmarks toolbar. */

#fullscr-toggler {
  pointer-events: none;
  display: none !important;
}

:root[inFullscreen]:not([fullscreen-autohide]) #navigator-toolbox {
  margin-top: revert !important;
}

:root[fullscreen-autohide][inFullscreen] {
  #navigator-toolbox {
    margin-top: calc(0.5px - var(--urlbar-container-height, 40px) - var(--tab-min-height, 36px) - (2 * var(--tab-block-margin))) !important;
    margin-bottom: -1px !important;
    transition: all 0.25s ease-in-out 0s !important;
    transition-delay: 0s !important;
    opacity: 0 !important;
    z-index: 2147483647 !important;
    -webkit-transform-style: preserve-3d !important;
    -webkit-backface-visibility: hidden !important;
    -moz-transform-style: preserve-3d !important;
    -moz-backface-visibility: hidden !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden !important;
    /* navbar shadow in fullscreen */
    position: relative;
    box-shadow: 0 0 8px -5px hsla(240, 4%, 0%, 0.5), 0 0 15px 0 hsla(0, 0%, 0%, 0.2) !important;
  }

  &:not([customizing]) {
    #browser findbar {
      padding-top: calc(7px + var(--urlbar-container-height, 40px) + var(--tab-min-height, 36px) + (2 * var(--tab-block-margin))) !important;
      margin-top: calc(0px - var(--urlbar-container-height, 40px) - var(--tab-min-height, 36px) - (2 * var(--tab-block-margin))) !important;
      transition-property: transform, opacity, width, left, right, padding-top, margin-top !important;
      transition-duration: 0.2s, 0.3s, 0.2s, 0.2s, 0.2s, 0.25s, 0.25s !important;
      transition-delay: 0s, 0s, 0s, 0s, 0s, 0s, 0s !important;
      transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out !important;
    }

    #navigator-toolbox:is(:focus-within, :hover, [popup-status], [urlbar-status]),
    > body > toolbox:is(:focus-within, :hover, [popup-status], [urlbar-status]) {
      ~ #browser findbar {
        margin-top: 2px !important;
        transition-duration: 0.2s, 0.3s, 0.2s, 0.2s, 0.2s, 0.25s, 0.25s !important;
        transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out, ease-in-out, cubic-bezier(0.26, 1, 0.8, 1), cubic-bezier(0.26, 1, 0.8, 1) !important;
      }
    }
  }

  &[customizing] {
    #customization-container > #customization-content-container {
      margin-top: calc(var(--urlbar-container-height, 40px) + var(--tab-min-height, 36px) + (2 * var(--tab-block-margin))) !important;
      z-index: 2147483647 !important;
    }
  }

  /* hides the nav-bar in fullscreen, but reveals it when hovering or focusing the
  nav-bar, or when nav-bar related popups are opened. requires
  fullscreenNavBar.uc.js to set attributes: popup-status and urlbar-status. */
  &[customizing] #navigator-toolbox,
  #navigator-toolbox:is(:focus-within, :hover, [popup-status], [urlbar-status]) {
    margin-block: 0 !important;
    margin-bottom: calc(-1px - var(--urlbar-container-height, 40px) - var(--tab-min-height, 36px) - (2 * var(--tab-block-margin))) !important;
    transition: all 0.25s cubic-bezier(0.26, 1, 0.8, 1) 0s !important;
    opacity: 1 !important;
  }

  /* :root[fullscreen-autohide][inFullscreen] #navigator-toolbox {
    position: fixed !important;
    display: block;
  } */

  /* comment out these rules if you don't want the sidebars to move up and down with the navbar */
  &:not([customizing]) {
    #navigator-toolbox:not(:focus-within, :hover, [popup-status], [urlbar-status]),
    > body > toolbox:not(:focus-within, :hover, [popup-status], [urlbar-status]) {
      ~ #browser {
        #sidebar-box,
        #vertical-tabs-pane {
          margin-top: calc(
            0px - var(--urlbar-container-height, 40px) - var(--tab-min-height, 36px) - (2 * var(--tab-block-margin))
            ) !important;
          transition: all 0.25s ease-in-out 0s !important;
        }
      }
    }

    #sidebar-box,
    #vertical-tabs-pane {
      padding-top: calc(4px + 1px + var(--urlbar-container-height, 40px) + var(--tab-min-height, 36px) + (2 * var(--tab-block-margin))) !important;
      margin-top: 0 !important;
      transition: all 0.25s cubic-bezier(0.26, 1, 0.8, 1) 0s !important;
      transform-style: flat !important;
      backface-visibility: hidden !important;
    }
  }
}

/* DOM fullscreen, e.g. hitting the fullscreen button on youtube */
:root[inDOMFullscreen] :is(#navigator-toolbox, #fullscr-toggler, #sidebar-box, #sidebar-splitter) {
  visibility: visible !important;
}