//-- Mixin ---------------------------------------------------------------------
@mixin _autohide_tabbar() {
  @include NotOption("userChrome.tabbar.on_bottom") {
    &,
    & .titlebar-buttonbox-container {
      @content;
    }
  }
  @include Option("userChrome.tabbar.on_bottom") {
    > *:not(.titlebar-buttonbox-container) {
      @content;
    }
  }
}

//------------------------------------------------------------------------------

@include OneLinerTabbar {
  :root:not([customizing]) #titlebar,
  :root:not([customizing]) #navigator-toolbox > #TabsToolbar {
    margin-bottom: var(--uc-tabbar-hide-height);
    will-change: margin-bottom;
  }
  #TabsToolbar:not([customizing]) {
    @include _autohide_tabbar {
      opacity: 0;
    }
    will-change: opacity;
  }

  #navigator-toolbox:is(:hover, :focus-within) {
    > #titlebar,
    > #TabsToolbar {
      margin-bottom: 0px;
    }
    #TabsToolbar {
      @include _autohide_tabbar {
        opacity: 1;
      }
    }
  }
}

@include Animate {
  #titlebar:not([customizing]) {
    transition: margin-bottom var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay),
                background-color 1s var(--animation-easing-function) !important;
  }

  #TabsToolbar:not([customizing]) {
    @include _autohide_tabbar {
      transition: opacity var(--uc-autohide-toolbar-speed) var(--animation-easing-function) var(--uc-autohide-toolbar-delay) !important;
    }
  }

  #navigator-toolbox:is(:hover, :focus-within) {
    transition-delay: 0s !important;

    > #titlebar:not([customizing]) {
      transition-delay: 0s !important;
    }

    #TabsToolbar:not([customizing]) {
      @include _autohide_tabbar {
        transition-delay: 0s !important;
      }
    }
  }
}
