/* ----------------------------------------------------------------- */
/* ---------- MacOS style close/min/max window buttons ------------- */
/* ----------------------------------------------------------------- */
#navigator-toolbox #nav-bar {
	padding-left: var(--firefoxcss-control-buttons-margin) !important;
	padding-right: initial !important;
}

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

@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;
	}
}

:root {
  --toolbar-start-end-padding: 3px !important;
  /* padding of frst and last child ,default - 8px */
}
  
  #navigator-toolbox:not([inFullscreen])
	#TabsToolbar
	.titlebar-buttonbox-container {
	visibility: visible !important;
	position: absolute !important;
	top: 2px !important;
	left: 0 !important;
	  right: unset !important;
	   padding-top: 10px !important;
	padding-bottom: 2px !important;
	padding-right: 2px  !important;
	padding-left: 8px !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: 4px  !important;
	  padding-left: 8px  !important;
	  margin: 0 !important;
	  align-items: center !important;
	  order: -1 !important;
  }
  #navigator-toolbox[inFullscreen] #nav-bar {
	  padding-left: initial !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: 2px !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: 0 !important;
	order: 0 !important;
  }
  
  #TabsToolbar .titlebar-min {
	appearance: none !important;
	-moz-box-ordinal-group: 1 !important;
	order: 1 !important;
  }
  
  #TabsToolbar .titlebar-max,
  #TabsToolbar .titlebar-restore {
	appearance: none !important;
	-moz-box-ordinal-group: 2 !important;
	order: 2 !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-right: 8px !important;
   position: relative !important;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-min{
  background-color: hsla(44, 95%, 60%, 1) !important;
	overflow: hidden !important;
  transition:  background-color 200ms ease !important;
}

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

#TabsToolbar .titlebar-buttonbox-container:hover .titlebar-min::before{
	opacity: 1;
	transition:  opacity 200ms ease !important;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-max,
#TabsToolbar .titlebar-buttonbox-container .titlebar-restore{
	background: hsla(125, 81%, 57%, 1) !important;
	overflow: hidden !important;
   transition:  background-color 200ms ease !important;
}
#TabsToolbar .titlebar-buttonbox-container .titlebar-max::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 55%;
	height: 55%;
	opacity: 0;
	background:  rgba(0, 0, 0, 0.6);
  border-radius: 2px;
	transition: opacity 400ms ease 400ms !important;
	
}
#TabsToolbar .titlebar-buttonbox-container .titlebar-max::after{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	width: 3px;
	height: 80%;
	opacity: 0;
	background: hsla(125, 81%, 57%, 1);
	transition: opacity 400ms ease 400ms !important;
}
#TabsToolbar .titlebar-buttonbox-container:hover .titlebar-max::before, 
#TabsToolbar .titlebar-buttonbox-container:hover .titlebar-max::after{
	opacity: 1;
	transition:  opacity 200ms ease !important;
}
#TabsToolbar .titlebar-buttonbox-container .titlebar-close{
	background: hsla(358, 86%, 63%, 1) !important;
	overflow: hidden !important;
   transition:  background-color 200ms ease !important;
}
#TabsToolbar .titlebar-buttonbox-container .titlebar-close::before{
	content: '';
	position: absolute;
	top: 50%;
	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: opacity 400ms ease 400ms !important;
}
#TabsToolbar .titlebar-buttonbox-container .titlebar-close::after{
	content: '';
	position: absolute;
	top: 50%;
	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: opacity 400ms ease 400ms !important;
 
}
#TabsToolbar .titlebar-buttonbox-container:hover .titlebar-close::before, 
#TabsToolbar .titlebar-buttonbox-container:hover .titlebar-close::after{
	opacity: 1;
		transition:  opacity 200ms ease !important;
}

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

#TabsToolbar .titlebar-buttonbox-container .titlebar-restore:after{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 4px;
	height: 4px;
	opacity: 0;
	background:  hsla(125, 81%, 57%, 1);
   border-radius: 0px;
	transition: opacity 400ms ease 400ms !important;
}

#TabsToolbar .titlebar-buttonbox-container:hover .titlebar-restore::before, 
#TabsToolbar .titlebar-buttonbox-container:hover .titlebar-restore::after{
	opacity: 1;
	transition:  opacity 200ms ease !important;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-buttonbox .titlebar-button:hover{
    opacity: 0.8;
}

#TabsToolbar .titlebar-buttonbox-container .titlebar-buttonbox .titlebar-button:active{
    opacity: 0.65;
}

@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: 6px !important;
		  padding-bottom: 2px !important;
		  padding-right: 2px  !important;
		  padding-left: 8px !important; 
		  order:-1 !important;
	}
	
	#main-window #navigator-toolbox:not([inFullscreen]) #nav-bar {
	padding-left: initial !important;
  }
  }
