/*== ShyFox Window Controls =========================================================================================================================

Styles for Min Max Close buttons


--- JUST IMPORTANT THINGS ---------------------------------------------------------------------------------------------------------------------------

*/

/* move buttons to correct position */
#TabsToolbar .titlebar-buttonbox-container{ display: none !important; }
#toolbar-menubar .titlebar-buttonbox-container{ display: flex !important; }

.titlebar-buttonbox-container{
  position: fixed !important;
  overflow: clip !important;

  z-index: -1 !important;
  
  transition: var(--transition) !important;
  & *{transition: var(--transition) !important;}
  
  /* set position to right */
  right: 0px;
  top: 8px;
}

/* 

--- VARIABLES ----------------------------------------------------------------------------------------------------------------------------------

*/

/* paddings */
:root{
  --buttonbox-right-wdt: var(--window-control-wdt);
  --buttonbox-right-hgt: 35px;
  
  --buttonbox-left-wdt: 0px;
  --buttonbox-left-hgt: 0px;
}

/* useful variables */
:root{
  --nav-rgt-btnbx-margin: var(--margin);
  --nav-rgt-btnbx-button: var(--toolbar-button-wdt);
  
  --nav-lft-btnbx-margin: 0px;
  --nav-lft-btnbx-button: 0px;
}

/* remove window controls in f11 fullscreen or in clean mode */
#main-window:is([sizemode="fullscreen"], [titlepreface*="‍"]:not([customizing])) {
  --window-control-wdt:   0px !important;                          /* <                             */
  --buttonbox-left-hgt:   0px !important;                          /* <         !DUPLICATE!         */
  --buttonbox-right-hgt:  0px !important;                          /* <                             */
  --nav-rgt-btnbx-margin: 0px !important;                          /* <   This code block must be   */
  --nav-rgt-btnbx-button: 0px !important;                          /* <      identical to the       */
  --nav-lft-btnbx-margin: 0px !important;                          /* <      code block below       */
  --nav-lft-btnbx-button: 0px !important;                          /* <                             */
  .titlebar-buttonbox-container {display: none !important;}        /* < vvvvvvvvvvvvvvvvvvvvvvvvvvv */
}

/* remove window controls by setting */
@media (-moz-bool-pref: "shyfox.remove.window.controls") { 
  #main-window{
    --window-control-wdt:   0px !important;                        /* < ^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
    --buttonbox-left-hgt:   0px !important;                        /* <                             */
    --buttonbox-right-hgt:  0px !important;                        /* <         !DUPLICATE!         */
    --nav-rgt-btnbx-margin: 0px !important;                        /* <                             */
    --nav-rgt-btnbx-button: 0px !important;                        /* <   This code block must be   */
    --nav-lft-btnbx-margin: 0px !important;                        /* <      identical to the       */
    --nav-lft-btnbx-button: 0px !important;                        /* <      code block above       */
    .titlebar-buttonbox-container {display: none !important;}      /* <                             */
  }
}

/*

--- DETECT SYSTEM AND CALCULATE VALUES  -------------------------------------------------------------------------------------------------------------

*/

/* default (if system not detected) */
:root {--window-control-wdt: 140px;}

/* Windows */

@media (-moz-platform: windows) {
  :root {--window-control-wdt: 138px;}
  .titlebar-buttonbox-container{
    top: 0px;
    height: var(--toolbar-item-hgt);
  }
  
  /* style when not enough space - merged into window border */
  #main-window[titlepreface*="​"][titlepreface*="‌"] {
    .titlebar-button {padding: calc(var(--margin) / 2) 15px !important;}
    .titlebar-buttonbox-container{
      height: var(--margin) !important;
      top: 0px;
      opacity: calc(var(--hide-bar-opct) / 2 );
      &:hover{opacity: 1}
    }
  }
  
  /* style when right toolbar is visible but navbar hidden - vertical orientation */
  #main-window:not([titlepreface*="​"])[titlepreface*="‌"]:not([customizing]){
    .titlebar-buttonbox-container{height: 85px}
    .titlebar-buttonbox{
      display: flex;
      flex-direction: column-reverse;
    }
    
    --buttonbox-left-wdt: 0px  !important;
    --buttonbox-right-hgt: 85px;
  }
}

/* Linux (GTK) */

:root{
  --window-control-gtk-max-wdt: 0px;
  --window-control-gtk-min-wdt: 0px;
}

@media (-moz-gtk-csd-maximize-button) { :root {--window-control-gtk-max-wdt: 40px;} }
@media (-moz-gtk-csd-minimize-button) { :root {--window-control-gtk-min-wdt: 40px;} }

@media (-moz-gtk-csd-available) {
  :root {
    --window-control-wdt: calc(
      40px
      + var(--window-control-gtk-min-wdt)
      + var(--window-control-gtk-max-wdt)
    );
  }
  
  /* GTK buttons design */
  .titlebar-button{
    .toolbarbutton-icon {
      background-image: none !important;
      stroke: none !important;
      -moz-context-properties: fill, fill-opacity !important;
    }
    
    &:hover .toolbarbutton-icon {background-color: color-mix(in srgb, var(--bt-col) 15%, transparent) !important;}

    margin-inline: 8px !important;
    padding: 0 !important;
    fill: var(--bt-col) !important;
    color: var(--bt-col) !important;
  }

  @media not (-moz-bool-pref: "shyfox.force.native.controls"){
    .titlebar-close   {list-style-image: url("../icons/gtk-window-close-symbolic.svg")    !important;}
    .titlebar-min     {list-style-image: url("../icons/gtk-window-minimize-symbolic.svg") !important;}
    .titlebar-max     {list-style-image: url("../icons/gtk-window-maximize-symbolic.svg") !important;}
    .titlebar-restore {list-style-image: url("../icons/gtk-window-restore-symbolic.svg")  !important;}
    
    .titlebar-button .toolbarbutton-icon{
      background-color: color-mix(in srgb, var(--bt-col) 5%, transparent);
      appearance: none !important;
      border-radius: 100%;
      padding: 4px !important;
    }
  }
  
  @media (-moz-bool-pref: "shyfox.force.native.controls"){
    .titlebar-close   {appearance: -moz-window-button-close    !important;}
    .titlebar-min     {appearance: -moz-window-button-minimize !important;}
    .titlebar-max     {appearance: -moz-window-button-maximize !important;}
    .titlebar-restore {appearance: -moz-window-button-restore  !important;}
  }
}

/* if GTK buttons position is right */
@media (-moz-gtk-csd-available){
  @media not (-moz-gtk-csd-reversed-placement){
    
    .titlebar-buttonbox-container{padding-right: 4px}
    
    /* style when not enough space - merged into window border */
    #main-window:is([titlepreface*="​"][titlepreface*="‌"], [titlepreface*="‍"]):not([customizing]){
      .titlebar-buttonbox-container{
        opacity: calc(var(--hide-bar-opct) / 2 );
        &:hover{opacity: 1};
        right: 5px;
      }
      
      .titlebar-button {margin: 0px !important;}
      
      @media not (-moz-bool-pref: "shyfox.force.native.controls"){
        .titlebar-buttonbox-container{
          top: 0px;
          height: var(--margin);
        }
        
        .titlebar-button .toolbarbutton-icon {border-radius: 0 !important;}
      }
      
      @media (-moz-bool-pref: "shyfox.force.native.controls"){
        .titlebar-buttonbox-container{
          top: -6px;
          height: calc(var(--margin) + 6px);
        }
      }
    }

    /* style when right toolbar is visible but navbar hidden - vertical orientation */
    #main-window:not([titlepreface*="​"])[titlepreface*="‌"]:not([customizing]){
      
      .titlebar-buttonbox{
        display: flex;
        flex-direction: column-reverse;
        top: -6px;

        & * {
          margin-top: 3px !important;
          margin-bottom: 3px !important;
        }
      }
      
      --buttonbox-right-wdt: 0px !important;
      --buttonbox-right-hgt: calc(
        35px
        + var(--window-control-gtk-max-wdt)
        + var(--window-control-gtk-min-wdt)
      );
    }
  }
}

/* MacOS */
@media (-moz-platform: macos){
  :root {--window-control-wdt: 72px;}
}

/*
--- CONTROLS ON LEFT ---------------------------------------------------------------------------------------------------------------------------

Styles when GTK window controls on left or system is MacOS 

*/

@media (-moz-gtk-csd-reversed-placement), (-moz-platform: macos){
  :root{
    --buttonbox-right-wdt: 0px;
    --buttonbox-right-hgt: 0px;
   
    --buttonbox-left-wdt: var(--window-control-wdt);
    --buttonbox-left-hgt: 35px;
    
    --nav-rgt-btnbx-margin: 0px;
    --nav-rgt-btnbx-button: 0px;
    
    --nav-lft-btnbx-margin: var(--margin);
    --nav-lft-btnbx-button: var(--toolbar-button-wdt);
  }
  
  .titlebar-buttonbox-container{padding-left: 3px}
  
  /* set position to left */
  .titlebar-buttonbox-container{
    left: 0px;
    right: auto !important;
  }
  
  /* style when not enough space - merged into window border */
  #main-window:is([titlepreface*="᠎"][titlepreface*="‌"], [titlepreface*="‍"]):not([customizing]){
    .titlebar-buttonbox-container{
      opacity: calc(var(--hide-bar-opct) / 2 );
      &:hover{opacity: 1};
      left: 5px;
    }

    .titlebar-button {margin: 0px !important;}

    @media not (-moz-bool-pref: "shyfox.force.native.controls"){
      .titlebar-buttonbox-container{
        top: 0px;
        height: var(--margin);
      }

      .titlebar-button .toolbarbutton-icon {border-radius: 0 !important;}
    }

    @media (-moz-bool-pref: "shyfox.force.native.controls"){
      .titlebar-buttonbox-container{
        top: -6px;
        height: calc(var(--margin) + 6px);
      }
    }
  }
}