/* Horizontal Tabs */
/* https://github.com/TFFC-Anoms12/Horizontal-Tabs-Zen *.
/* V1.4.1 */

:root {
  --user-color-primary: var(--zen-primary-color) !important;
  --user-color-secondary: #ffffff15 !important;
  --user-color-tertiary: #1f1f1f !important;
}


* {
  border: none !important;
}

@media not (-moz-bool-pref: "zen.tabs.vertical") {
  .zen-workspace-tabs-section {
    position: relative !important;  
    margin-top: 0 !important;
    height: 100% !important;
    flex-direction: row !important;
   max-width: 100% !important;
  }

  #zen-sidebar-top-buttons {
    order: 2 !important;
  }

  #zen-workspaces-button {
    min-width: 50px !important;
    display: flex !important;
    overflow-y: scroll !important;
  }
  #navigator-toolbox {
     margin-bottom: 30px !important;
    flex-direction: column !important;
    padding-bottom: 0 !important;
    #nav-bar {
      order: 3 !important;
      margin-top: 7px !important;
    }
    #tabbrowser-tabs {
      margin-right: 140px !important;
      position: relative !important;
      display: flex !important;
      flex-direction: column !important;
      #zen-tabs-wrapper {
        overflow: scroll !important;
        display: flex !important;
        flex-direction: column !important;
        max-height: 42px !important;
        height: 40px !important;
        width: 100% !important;
        #zen-browser-tabs-container {
          height: 40px !important;
          #tabbrowser-arrowscrollbox {
            display: flex !important;
            flex-direction: column !important;
          }
        }
      }
    }
  }

  #zen-browser-tabs-container {
    display: flex !important;
    #vertical-pinned-tabs-container {
      display: flex !important;
      width: min-content !important;
      max-width: min-content !important;
    }
  }

  #scrollbutton-up {
    display: none !important;
  }

  #scrollbutton-down {
    display: none !important;
  }

  .tabbrowser-tab {
    overflow: visible !important;
    display: flex !important;
    visibility: visible !important;
    height: 36px !important;
    max-height: 36px !important;
    min-width: 36px !important;
    max-width: 225px !important;
    width: auto;
    container-name: tab !important;
    container-type: inline-size !important; /* Ensures container queries work */

    &:not([zen-essential]) {
      &[selected] {
        flex: 1 1 150px !important;
        .tab-background {
          overflow: visible !important;
        }
      }
    }
    .tab-content {
      display: flex !important;
    
    .tab-close-button {
      min-width: 24px !important;
      height: 24px !important;
      padding-left: 5px !important;
      margin-right: -2px !important;
      display: block !important;
    }
    .tab-icon-image {
      margin-right: 5px !important;
    }
    }
    &:not([zen-essential])[pinned] {
      width: 100% !important;
      .tab-content {
        margin-left: 2px !important;
      }
    }
  }

  /* Corrected container query */
  @container tab (max-width: 53px) {
    tab:not([zen-essential]) {
      min-width: 36px !important;
      width: 36px !important;
      flex: 1 1 36px !important;

      .tab-background {
        width: 36px !important;
      }

      .tab-content {
        width: 36px !important;

        .tab-icon-stack {
          width: min-content !important;
        }

        .tab-label-container {
          display: none !important;
        }

        .tab-close-button,
        .tab-reset-button {
          display: none !important;
        }
      }

      &[selected]:hover {
        .tab-icon-image {
          display: none !important;
        }

        &:not([pinned]) {
          .tab-close-button {
            display: flex !important;
          }
        }

        &[pinned] {
          .tab-reset-button {
            display: flex !important;
          }
        }
      }
    }
  }

  /* Corrected container query */
  @container width (max-width: 500px) {
    .tab-icon-image {
      display: none !important; /* Hides the close button when the tab width is < 50px */
    }
  }

  @media not (-moz-bool-pref: "zen.tabs.vertical") {
    #zen-essentials-container {
      height: 40px !important;
    }
  }

  .tabbrowser-tab[zen-essential="true"] {
    order: 0 !important;
    overflow: visible !important;
    margin: 0 2px 0 2px !important;
    min-height: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    width: 36px !important;
    max-height: 36px !important;
    max-width: 36px !important;
    flex: auto !important;
    .tab-stack {
      height: 36px !important;
      .tab-background {
        height: 36px !important;
        padding: 0 !important;
        margin: 0 !important;
      }
      .tab-content {
        height: 36px !important;
        .tab-close-button {
          display: none !important;
        }
        .tab-icon-image {
          margin-left: 2.5px !important;
          margin-right: 2.5px !important;
        }
      }
    }
  }


  /*Hide closed tabs... */
  tab:not([fadein]) {
    display: none !important;
  }
  /* Hide empty tab */
  tab[zen-empty-tab] {
    display: none !important;
  }

  /* URL bar positioning */
  #nav-bar {
    width: calc(100% - 96px - 32px) !important;
    margin-left: 50px !important;
    #urlbar:not([breakout-extend]) {
      #urlbar-background {
        background-color: var(--user-color-secondary) !important;
        border-radius: 360px !important;
      }
    }
  }

  #zen-sidebar-top-buttons {
    z-index: -1 !important;
    display: block !important;
    width: 100vw !important;
    margin-top: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    position: relative !important;
    top: 33% !important;
    #zen-sidebar-top-buttons-customization-target {
      position: relative !important;
      top: -30px !important;
      height: 60px !important;
      width: 100vw !important;
      display: flex !important;
      justify-content: flex-start !important;
      #zen-sidebar-top-buttons-separator {
        display: none !important;
      }
      #PanelUI-button {
        order: 1 !important;
        margin-left: auto !important;
        margin-right: 10px;
      }
      #unified-extensions-button {
        display: none !important;
        /*Hide as it is in the 3 dot menu */
      }
    }
  }
  #zen-sidebar-bottom-buttons {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin-top: 90px !important;
    margin-right: 15px !important;
    max-width: 100px !important;
    #zen-workspaces-button {
    @media not (-moz-bool-pref: "zen.workspaces.show-workspace-indicator") {
    display: none !important;
  }
    }
  }

  #zen-appcontent-wrapper {
    z-index: 99999 !important;
  }
  /* Try to make bookmark bar work... */
  #zen-appcontent-navbar-container {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    margin-top: 7px !important;
    z-index: 999999 !important;
    opacity: 1 !important;
    height: 32px !important;
    overflow: visible !important;
    pointer-events: auto !important;
    #personal-bookmarks {
      pointer-events: auto !important; 
      position: absolute !important;
      right: 0 !important;
      top: 0 !important;
      width: calc(100vw - 115px) !important;
      margin-right: 115px !important;
      margin-top: 85px !important;
    }
     #PersonalToolbar {
      opacity: 1 !important;
    }
    .titlebar-buttonbox-container {
      opacity: 1 !important;
    }
  }

  /* Hide things that break the browser */
  #toolbar-context-customize {
    display: none !important;
  }
  /* Fix Media Player */
  #zen-media-controls-toolbar {
    position: absolute !important;
    transform-origin: right center; /* Anchor to the right */
    right: 19% !important;
    bottom: 1% !important;
    toolbaritem {
      width: 170px !important;
    }
  }
}

/* Disable pinning tabs until we find recovery for them 
#context_pinTab {
  display: none !important;
}
*/
/* Show alltabs-button */
#alltabs-button {
  display: flex !important;
}

#tabbrowser-arrowscrollbox-periphery {
  height: 36px !important;
}


