/*---+---+---+---+---+---+
 | G | L | O | B | A | L |
 +---+---+---+---+---+---*/

:root {
  /*  Global Border Radius
   *  applied to ALL UI elements
   */
  --uc-border-radius: 8px;

  /*  The distance the Statuspanel floats
   *  away from the window border
   *  0 places directly in the corner
   */
  --uc-status-panel-spacing: 12px;
}

/* remove window control buttons */
.titlebar-buttonbox-container {
  display: none !important;
}

#pageActionButton {
  display: none !important;
}

#PanelUI-menu-button {
  padding: 0px !important;
}
#PanelUI-menu-button .toolbarbutton-icon {
  width: 1px !important;
}
#PanelUI-menu-button .toolbarbutton-badge-stack {
  padding: 0px !important;
}

/*---+---+---+---+---+---+---+
 | T | O | O | L | B | A | R |
 +---+---+---+---+---+---+---*/

/*  Position of the Personal Toolbar
 *  possible values:
 *  0 – toolbar on top
 *  4 – toolbar on bottom
 */
:root {
  --uc-toolbar-position: 4;
}

/*  Darken the Personal Toolbar by X amount
 *  where X = 1 means pure black
 *  and X = 0 means no darkening at all
 */
@media (prefers-color-scheme: dark) {
  :root {
    --uc-darken-toolbar: 0.2;
  }
}
@media (prefers-color-scheme: light) {
  :root {
    --uc-darken-toolbar: 0;
  }
}

/*---+---+---+---+---+---+---+
 | U | R | L | — | B | A | R |
 +---+---+---+---+---+---+---*/

:root {
  /*  Width of the URL Bar for the Oneline layout
   *  If enabled the max-width is applied on focus
   *  otherwise the URL Bar will always be it's min-width
   */
  --uc-urlbar-min-width: 100vw;
  --uc-urlbar-max-width: 100vw;

  /*  Position of the URL Bar
   *  possible values:
   *  1 – tabs on the right
   *  3 – tabs on the left
   */
  --uc-urlbar-position: 1;

  /*  Firefox can be a little wonky with the vertical
   *  URL Bar placement. Change this variable to adapt
   *  to this when necessary.
   */
  --uc-urlbar-top-spacing: 1px;
}

/* Disable the Navigation Buttons */
#back-button,
#forward-button {
  display: none !important;
}

/* Disables the Tracking Protection Shield */
/* #tracking-protection-icon-container { display: none !important; } */

/* Encryption and Permissions icons */
/* Only hides permission items */
#identity-permission-box {
  display: none !important;
}
/* Hides extension page box */
#identity-box.extensionPage {
  display: none !important;
}
/* Hides encryption AND permission items */
/* #identity-box { display: none !important } */

/* Hide everything BUT the zoom indicator within the URL Bar */
/* #page-action-buttons > :not(#urlbar-zoom-button) { display: none !important; } */

/* Hide the »Go«-arrow in the URL Bar */
#urlbar-go-button {
  display: none !important;
}

/* Hides the Extensions Menu Icon */
/* #unified-extensions-button { display: none !important; } */

/*---+---+---+---+---+---+---+
 | T | A | B | — | B | A | R |
 +---+---+---+---+---+---+---*/

:root {
  /*  Allow tabs to have dynamic widths based on
   *  the Tab Bars maximum width
   */
  --uc-active-tab-width: clamp(100px, 30vw, 300px);
  --uc-inactive-tab-width: clamp(100px, 20vw, 200px);

  /*  Enable this to always show the Tab Close button
   *  possible values:
   *  show: -moz-inline-block
   *  hide: none
   */
  --show-tab-close-button: none;

  /*  Enable this to only show the Tab Close button on tab hover
   *  possible values:
   *  show: -moz-inline-block
   *  hide: none
   */
  --show-tab-close-button-hover: none;

  /*  Hide the all Tabs button from the Tab Bar
   *  possible values:
   *  show: -moz-box
   *  hide: none
   */
  --uc-show-all-tabs-button: none;

  /*  Left and Right "dip" of the container indicator
   *  0px equals tab width
   *  higer values make the indicator smaller
   */
  --container-tabs-indicator-margin: 10px;

  /*  Amount of Glow to add to the container indicator
   *  Setting it to 0 disables the Glow
   */
  --uc-identity-glow: 0 1px 10px 1px;
}

/* Hide the secondary Tab Label
 * e.g. playing indicator (the text, not the icon) */
.tab-secondary-label {
  display: none !important;
}



/*---+---+---+---+---+---+---+
 | C | O | L | O | U | R | S |
 +---+---+---+---+---+---+---*/


@media (prefers-color-scheme: dark) { :root {
  
  /* These colours are (mainly) used by the
     Container Tabs Plugin */
  --uc-identity-colour-blue:      #7ED6DF;
  --uc-identity-colour-turquoise: #55E6C1;
  --uc-identity-colour-green:     #B8E994;
  --uc-identity-colour-yellow:    #F7D794;
  --uc-identity-colour-orange:    #F19066;
  --uc-identity-colour-red:       #FC5C65;
  --uc-identity-colour-pink:      #F78FB3;
  --uc-identity-colour-purple:    #786FA6;
  
  /*  Cascades main Colour Scheme */
  --uc-base-colour:               #1E2021;
  --uc-highlight-colour:          #191B1C;
  --uc-inverted-colour:           #FAFAFC;
  --uc-muted-colour:              #AAAAAC;
  --uc-accent-colour:             var(--uc-identity-colour-purple);
  
}}


@media (prefers-color-scheme: light) { :root {
  
  /* These colours are (mainly) used by the
     Container Tabs Plugin */
  --uc-identity-colour-blue:      #1D65F5;
  --uc-identity-colour-turquoise: #209FB5;
  --uc-identity-colour-green:     #40A02B;
  --uc-identity-colour-yellow:    #E49320;
  --uc-identity-colour-orange:    #FE640B;
  --uc-identity-colour-red:       #FC5C65;
  --uc-identity-colour-pink:      #EC83D0;
  --uc-identity-colour-purple:    #822FEE;
  
  /*  Cascades main Colour Scheme */
  --uc-base-colour:               #FAFAFC;
  --uc-highlight-colour:          #DADADC;
  --uc-inverted-colour:           #1E2021;
  --uc-muted-colour:              #191B1C;
  --uc-accent-colour:             var(--uc-identity-colour-purple);
  
}}






/* Down here I'm just reassigning variables based on the colours set above.
   Feel free to play around with these but there is no editing necessary below this line. c:
   */

:root {

  --lwt-frame: var(--uc-base-colour) !important;
  --lwt-accent-color: var(--lwt-frame) !important;
  --lwt-text-color: var(--uc-inverted-colour) !important;

  --toolbar-field-color: var(--uc-inverted-colour) !important;

  --toolbar-field-focus-color: var(--uc-inverted-colour) !important;
  --toolbar-field-focus-background-color: var(--uc-highlight-colour) !important;
  --toolbar-field-focus-border-color: transparent !important;

  --toolbar-field-background-color: var(--lwt-frame) !important;
  --lwt-toolbar-field-highlight: var(--uc-inverted-colour) !important;
  --lwt-toolbar-field-highlight-text: var(--uc-highlight-colour) !important;
  --urlbar-popup-url-color: var(--uc-accent-colour) !important;

  --lwt-tab-text: var(--lwt-text-colour) !important;

  --lwt-selected-tab-background-color: var(--uc-highlight-colour) !important;

  --toolbar-bgcolor: var(--lwt-frame) !important;
  --toolbar-color: var(--lwt-text-color) !important;
  --toolbarseparator-color: var(--uc-accent-colour) !important;
  --toolbarbutton-hover-background: var(--uc-highlight-colour) !important;
  --toolbarbutton-active-background: var(--toolbarbutton-hover-background) !important;

  --lwt-sidebar-background-color: var(--lwt-frame) !important;
  --sidebar-background-color: var(--lwt-sidebar-background-color) !important;

  --urlbar-box-bgcolor: var(--uc-highlight-colour) !important;
  --urlbar-box-text-color: var(--uc-muted-colour) !important;
  --urlbar-box-hover-bgcolor: var(--uc-highlight-colour) !important;
  --urlbar-box-hover-text-color: var(--uc-inverted-colour) !important;
  --urlbar-box-focus-bgcolor: var(--uc-highlight-colour) !important;

}



.identity-color-blue      { --identity-tab-color: var(--uc-identity-colour-blue)      !important; --identity-icon-color: var(--uc-identity-colour-blue)      !important;  }
.identity-color-turquoise { --identity-tab-color: var(--uc-identity-colour-turquoise) !important; --identity-icon-color: var(--uc-identity-colour-turquoise) !important; }
.identity-color-green     { --identity-tab-color: var(--uc-identity-colour-green)     !important; --identity-icon-color: var(--uc-identity-colour-green)     !important; }
.identity-color-yellow    { --identity-tab-color: var(--uc-identity-colour-yellow)    !important; --identity-icon-color: var(--uc-identity-colour-yellow)    !important; }
.identity-color-orange    { --identity-tab-color: var(--uc-identity-colour-orange)    !important; --identity-icon-color: var(--uc-identity-colour-orange)    !important; }
.identity-color-red       { --identity-tab-color: var(--uc-identity-colour-red)       !important; --identity-icon-color: var(--uc-identity-colour-red)       !important; }
.identity-color-pink      { --identity-tab-color: var(--uc-identity-colour-pink)      !important; --identity-icon-color: var(--uc-identity-colour-pink)      !important; }
.identity-color-purple    { --identity-tab-color: var(--uc-identity-colour-purple)    !important; --identity-icon-color: var(--uc-identity-colour-purple)    !important; }


/*---+---+---+---+---+---+
 | L | A | Y | O | U | T |
 +---+---+---+---+---+---*/

:root {
  --toolbarbutton-border-radius: var(--uc-border-radius) !important;
  --tab-border-radius: var(--uc-border-radius) !important;
  --arrowpanel-border-radius: var(--uc-border-radius) !important;
}

#toolbar-menubar {
  &[autohide="true"] {
    &[inactive]:not([customizing]) {
      width: 0px;
    }
  }
}

#main-window,
#toolbar-menubar,
#TabsToolbar,
#navigator-toolbox,
#sidebar-box,
#nav-bar {
  box-shadow: none !important;
}

#main-window,
#toolbar-menubar,
#TabsToolbar,
#PersonalToolbar,
#navigator-toolbox,
#sidebar-box,
#nav-bar {
  border: none !important;
}

/* remove "padding" left and right from tabs */
.titlebar-spacer {
  display: none !important;
}

/* fix Shield Icon padding */
#urlbar-input-container[pageproxystate="valid"]
  > #tracking-protection-icon-container
  > #tracking-protection-icon-box
  > #tracking-protection-icon {
  padding-bottom: 1px;
}

#TabsToolbar {
  order: 2;
}
#nav-bar {
  order: 3;
}

#PersonalToolbar {
  padding: 6px !important;
  box-shadow: inset 0 0 50vh rgba(0, 0, 0, var(--uc-darken-toolbar)) !important;
  order: var(--uc-toolbar-position);
  width: 100%;
}

#statuspanel #statuspanel-label {
  border: none !important;
  border-radius: var(--uc-border-radius) !important;
}


/*---+---+---+---+---+---+---+---+---+
 | R | E | S | P | O | N | I | V | E |
 +---+---+---+---+---+---+---+---+---*/

@media (min-width: 1000px) {
  #navigator-toolbox {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }

  #nav-bar {
    order: var(--uc-urlbar-position);
    width: var(--uc-urlbar-min-width);
  }

  #nav-bar #urlbar-container {
    min-width: 0px !important;
    width: auto !important;
  }

  #TabsToolbar {
    width: calc(100vw - var(--uc-urlbar-min-width) - 1px);
  }

  #navigator-toolbox:focus-within #nav-bar {
    width: var(--uc-urlbar-max-width);
  }
  #navigator-toolbox:focus-within #titlebar {
    width: calc(100vw - var(--uc-urlbar-max-width) - 1px);
  }
}

/*---+---+---+---+---+---+---+---+
 | F | L | O | A | T | I | N | G |
 +---+---+---+---+---+---+---+---*/

#statuspanel #statuspanel-label {
  margin: 0 0 var(--uc-status-panel-spacing) var(--uc-status-panel-spacing) !important;
}



/*---+---+---+---+---+---+
 | N | A | V | B | A | R |
 +---+---+---+---+---+---*/

#navigator-toolbox:not(:-moz-lwtheme) {
  background: var(--toolbar-field-background-color) !important;
}

#nav-bar {
  padding-block-start: 0px !important;

  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

#urlbar,
#urlbar * {
  outline: none !important;
  box-shadow: none !important;
}

#urlbar-background {
  border: transparent !important;
}

#urlbar[focused="true"] > #urlbar-background,
#urlbar:not([open]) > #urlbar-background {
  background: var(--toolbar-field-background-color) !important;
}

#urlbar[open] > #urlbar-background {
  background: var(--toolbar-field-background-color) !important;
}

.urlbarView-row:hover > .urlbarView-row-inner,
.urlbarView-row[selected] > .urlbarView-row-inner {
  background: var(--toolbar-field-focus-background-color) !important;
}

.urlbar-icon,
#urlbar-go-button {
  margin: auto;
}
.urlbar-page-action {
  padding: 0 inherit !important;
}

/* #page-action-buttons, */
#home-button,
#stop-reload-button {
  display: none !important;
}


/*---+---+---+---+---+---+
 | N | O | T | A | B | S |
 +---+---+---+---+---+---*/
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_toolbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Hides tabs toolbar */
/* For OSX use hide_tabs_toolbar_osx.css instead */

/* Note, if you have either native titlebar or menubar enabled, then you don't really need this style.
 * In those cases you can just use: #TabsToolbar{ visibility: collapse !important }
 */

/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it
*/

:root[tabsintitlebar]{ --uc-toolbar-height: 40px; }
:root[tabsintitlebar][uidensity="compact"]{ --uc-toolbar-height: 32px }
#titlebar{
  will-change: unset !important;
  transition: none !important;
  opacity: 1 !important;
}
#TabsToolbar{ visibility: collapse !important }
:root[sizemode="fullscreen"] #titlebar{ position: relative }

:root[sizemode="fullscreen"] #TabsToolbar > .titlebar-buttonbox-container{
  visibility: visible !important;
  z-index: 2;
}

:root:not([inFullscreen]) #nav-bar{
  margin-top: calc(0px - var(--uc-toolbar-height,0px));
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"]{
  min-height: unset !important;
  height: var(--uc-toolbar-height,0px) !important;
  position: relative;
}

#toolbar-menubar[autohide="false"]{
  margin-bottom: var(--uc-toolbar-height,0px)
}

:root[tabsintitlebar] #toolbar-menubar[autohide="true"] #main-menubar{
  flex-grow: 1;
  align-items: stretch;
  background-attachment: scroll, fixed, fixed;
  background-position: 0 0, var(--lwt-background-alignment), right top;
  background-repeat: repeat-x, var(--lwt-background-tiling), no-repeat;
  background-size: auto 100%, var(--lwt-background-size, auto auto), auto auto;
  padding-right: 20px;
}
:root[tabsintitlebar] #toolbar-menubar[autohide="true"]:not([inactive]) #main-menubar{
  background-color: var(--lwt-accent-color);
  background-image: linear-gradient(var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor),var(--toolbar-bgcolor,--toolbar-non-lwt-bgcolor)), var(--lwt-additional-images,none), var(--lwt-header-image, none);
  mask-image: linear-gradient(to left, transparent, black 20px);
}

#toolbar-menubar:not([inactive]){ z-index: 2 }
#toolbar-menubar[autohide="true"][inactive] > #menubar-items {
  opacity: 0;
  pointer-events: none;
  margin-left: var(--uc-window-drag-space-pre,0px)
}