/* ----- Move menu buttons to the left side ----- */
@media -moz-pref("sidebar.verticalTabs") {
  #nav-bar .titlebar-buttonbox-container {
    display: none !important;
  }
  
    #navigator-toolbox #nav-bar .titlebar-spacer[type="post-tabs"] {
      display: none !important;
    }
}

/* Fix for web apps */
#navigator-toolbox[tabs-hidden] {
	#nav-bar .titlebar-buttonbox-container {
	  display: none !important;
	}
}

#navigator-toolbox .titlebar-buttonbox-container .titlebar-button{
  content: "" !important;
}

#nav-bar #PanelUI-button #PanelUI-menu-button {
  padding-right: 2px !important;
  padding-left: 4px !important;
}

#nav-bar #PanelUI-button {
  -moz-box-ordinal-group: 0 !important;
		order: 0 !important;
}

toolbar:not([customizing]) > #nav-bar-overflow-button {
  -moz-box-ordinal-group: 1 !important;
	order: 1 !important;
}

toolbar:not([customizing]) > #nav-bar-customization-target {
  -moz-box-ordinal-group: 2 !important;
		order: 2 !important;
}

/* Fix popup position */
#appMenu-popup {
  margin-inline: -244px !important;
}

#widget-overflow {
	margin-inline: -320px !important;
  }  
/* ----------------------------------------------------------------- */
/* ---------- MacOS style close/min/max window buttons ------------- */
/* ----------------------------------------------------------------- */

#navigator-toolbox #nav-bar {
  padding-right: calc(var(--firefoxcss-control-buttons-margin) - 10px) !important;
}

#navigator-toolbox:not([inFullscreen])
  #TabsToolbar
  .titlebar-buttonbox-container {
  visibility: visible !important;
  display: flex !important;
  position: absolute !important;
  top: 2px !important;
  left: unset !important;
  right: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 2px !important;
  padding-right: 8px  !important;
  padding-left: 2px !important; 
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-button {
	width: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  height: 14px !important;
}

#navigator-toolbox[inFullscreen] #TabsToolbar .titlebar-buttonbox-container{
	padding-top:4px !important;
	padding-bottom: 4px !important;
	padding-right: 8px  !important;
	padding-left: 4px  !important;
	margin: 0 !important;
	align-items: center !important;
}

:root:-moz-window-inactive:not([customizing])
  :is(.titlebar-buttonbox)
  > toolbarbutton:not(:hover) {
  opacity: 0.65 !important;
}

:is(.titlebar-buttonbox) .toolbarbutton-icon {
  opacity: 1 !important;
  appearance: none !important;
}

#TabsToolbar .titlebar-button > .toolbarbutton-icon {
  width: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  height: 14px !important;
  stroke: none !important;
}

#TabsToolbar .titlebar-buttonbox {
  margin-right: 2px !important;
  margin-left: 0px !important;
}

#TabsToolbar .titlebar-button {
  background-color: transparent !important;
  appearance: none !important;
  padding: 0px !important;
  margin: 0 !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

#TabsToolbar .titlebar-close {
  appearance: none !important;
  -moz-box-ordinal-group: 2 !important;
	order:2 !important;
}

#TabsToolbar .titlebar-min {
  appearance: none !important;
  -moz-box-ordinal-group: 0 !important;
	order:0 !important;
}

#TabsToolbar .titlebar-max,
#TabsToolbar .titlebar-restore {
  appearance: none !important;
  -moz-box-ordinal-group: 1 !important;
	order:1!important;
}

#TabsToolbar .titlebar-buttonbox-container:not(:hover) .titlebar-buttonbox .titlebar-button {
  background-color: hsla(0, 0%, 65%, 1)  !important;
  transition:  background-color 400ms ease 400ms  !important;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-button > .toolbarbutton-icon {
  list-style-image: none  !important;
   margin: 0px !important;
  padding: 0px !important;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-buttonbox .titlebar-button {
  border-radius: 50% !important;
  margin-left: 8px !important;
  position: relative !important;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-min{
  background-color: #fac536 !important;
	overflow: hidden !important;
  transition:  background-color 200ms ease !important;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-min::before{
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70%;
	height: 2px;
	opacity: 0;
	background:  rgba(0, 0, 0, 0.6);
  border-radius: 2px;
	transition: 200ms;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-min:hover::before{
	opacity: 1;
	top: 50%;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-max,
#TabsToolbar .titlebar-buttonbox-container .titlebar-restore{
	background: #39ea49 !important;
	overflow: hidden !important;
   transition:  background-color 200ms ease !important;
}
#TabsToolbar .titlebar-buttonbox-container .titlebar-max::before{
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 55%;
	height: 55%;
	opacity: 0;
	background:  rgba(0, 0, 0, 0.6);
  border-radius: 2px;
	transition: 200ms;
}
#TabsToolbar .titlebar-buttonbox-container .titlebar-max::after{
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	width: 3px;
	height: 80%;
	opacity: 0;
	background: #39ea49;
	transition: 200ms;
}
#TabsToolbar .titlebar-buttonbox-container .titlebar-max:hover::before, 
#TabsToolbar .titlebar-buttonbox-container .titlebar-max:hover::after{
	opacity: 1;
	top: 50%;
}
#TabsToolbar .titlebar-buttonbox-container .titlebar-close{
	background: #f25056 !important;
	overflow: hidden !important;
   transition:  background-color 200ms ease !important;
}
#TabsToolbar .titlebar-buttonbox-container .titlebar-close::before{
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	width: 2px;
	height: 9px;
	opacity: 0;
	background:  rgba(0, 0, 0, 0.65);
  border-radius: 1px;
	transition: 200ms;
}
#TabsToolbar .titlebar-buttonbox-container .titlebar-close::after{
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 2px;
	height: 9px;
  opacity: 0;
	background: rgba(0, 0, 0, 0.65);
   border-radius: 1px;
	transition: 200ms;
 
}
#TabsToolbar .titlebar-buttonbox-container .titlebar-close:hover::before, 
#TabsToolbar .titlebar-buttonbox-container .titlebar-close:hover::after{
	opacity: 1;
	top: 50%;
}

  #TabsToolbar .titlebar-buttonbox-container .titlebar-restore:before {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
	height: 8px;
	opacity: 0;
	background: rgba(0, 0, 0, 0.65);
  border-radius: 2px;
	transition:200ms;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-restore:after{
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4px;
	height: 4px;
	opacity: 0;
	background: #39ea49;
   border-radius: 0px;
	transition: 200ms;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-restore:hover::before, 
#TabsToolbar .titlebar-buttonbox-container .titlebar-restore:hover::after{
	opacity: 1;
	top: 50%;
}

#navigator-toolbox #TabsToolbar .titlebar-buttonbox-container {
  -moz-box-ordinal-group: 1 !important;
}
#navigator-toolbox[inFullscreen] #navigator-toolbox #TabsToolbar .titlebar-buttonbox-container {
  -moz-box-ordinal-group: 1 !important;
}

@media only screen and (max-width: 670px) {
  #main-window #navigator-toolbox:not([inFullscreen])
    #TabsToolbar
    .titlebar-buttonbox-container {
    visibility: visible !important;
		position: relative !important;
		padding-top: 4px !important;
		padding-bottom: 2px !important;
		padding-right: 8px  !important;
		padding-left: 2px !important; 
  }
  
  #main-window #navigator-toolbox:not([inFullscreen]) #nav-bar {
    padding-right: initial !important;
}
}
