@import url('./styles/variables.css');

#navigator-toolbox {
  --tab-min-height: 16px;
  --tab-border-radius: 0;
  --tab-block-margin: 0;
  --toolbarbutton-inner-padding: 6px;
  --toolbar-bgcolor: var(--ff-bg-color);
  --toolbar-field-background-color: var(--ff-bg-color-1);
  --toolbarbutton-border-radius: 5px;
  --toolbar-start-end-padding: 2px;
  --urlbar-margin-inline: 0;
  --urlbar-container-padding: 0;
}

toolbarbutton {
  --toolbarbutton-inner-padding: 6px;
}

#TabsToolbar {
  background-color: var(--toolbar-bgcolor) !important;
}

.browser-toolbar {
  padding: 0 !important;
  min-height: 0;
}

/* Rounded browser content window */
#browser {
  background-color: var(--ff-bg-color);
}
#appcontent {
  margin: 4px;
  margin-top: 0;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}



/* Tabs */

.tabbrowser-tab {
  padding: 0 !important;
  font-size: 0.8rem !important;
}

.tabbrowser-tab .tab-content {
  padding-bottom: 2px !important;
}

.tabbrowser-tab .tab-label-container {
  height: 1.8rem !important;
}

.tabbrowser-tab .tab-text {
  padding: 0 !important;
}

.tabbrowser-tab .tab-secondary-label {
  font-size: 0.6rem !important;
}

.tabbrowser-tab .tab-background {
  background-color: transparent !important;
  border-bottom: 3px solid transparent;
}
.tabbrowser-tab .tab-background[selected] {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-bottom-color: var(--ff-accent-color);
}
.tabbrowser-tab:hover .tab-background:not([selected]) {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

.tab-close-button {
  opacity: 0.6;
  padding: 2px !important;
  width: 14px !important;
  height: 14px !important;
}

#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
  margin-inline-start: 0 !important;
}

toolbarbutton#tabs-newtab-button image {
  --button-size: 10px;
  width: calc(2 * var(--toolbarbutton-inner-padding) + var(--button-size)) !important;
  height: calc(2 * var(--toolbarbutton-inner-padding) + var(--button-size)) !important;
}

toolbarbutton#alltabs-button {
  display: none !important;
}



/* Nav bar with url */

#nav-bar {
  border-top: none !important;
  background-color: var(--toolbar-bgcolor) !important;
  padding: 3px 2px 0 !important;
}
#TabsToolbar {
  visibility: collapse !important;
}

#urlbar-container {
  min-height: var(--ff-urlbar-height) !important;
  --urlbar-container-height: unset !important;
}

#urlbar {
  font-size: 0.95rem !important;
  min-height: var(--ff-urlbar-height) !important;
  top: 5px !important;
}
#urlbar:not([breakout-extend]) {
  height: var(--ff-urlbar-height) !important;
}
#navigator-toolbox {
  border-bottom: none !important;
}

.urlbarView-url {
  color: var(--ff-accent-color-1) !important;
}
.urlbarView {
  background-color: var(--ff-bg-color-2) !important;
}

.urlbar-input-container {
  background-color: var(--ff-bg-color-2) !important;
  border-color: transparent !important;
  min-height: 0 !important;
  padding-inline: 0 !important;
  padding-block: 0 !important;
  height: var(--ff-urlbar-height) !important;
}

#urlbar[breakout-extend] .urlbar-input-container {
  background-color: var(--ff-bg-color-2) !important;
  padding-inline: 0 !important;
}
#urlbar[breakout-extend] .urlbar-input-container #identity-box {
  opacity: 0.4 !important;
}

#urlbar-container {
  margin: 0 !important;
}



/* Sidebar + tab */
#sidebar-main {
  background: var(--ff-bg-color) !important;
}
#sidebar-box {
  background: var(--ff-bg-color) !important;
  margin: 3px 0 !important;
}
#sidebar {
  background: var(--ff-bg-color-2) !important;
}

#tabbrowser-tabbox {
  border-radius: 6px !important;
  overflow: hidden !important;
  margin: 4px !important;
}


/* URL bar progress indicator */
/* #urlbar[data-page-progress="loaded"]::before {
  display: none !important;
} */

@keyframes ucLoadingSnimation {
  0% { background-position: 130% 50%; }
	100% { background-position: -70% 50%; }
}

/* #urlbar[data-page-progress]::before {
  display: block;
  content: " ";
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(
    140deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, .25) 50%,
    rgba(255, 255, 255, 0) 65%
  ) rgba(255, 255, 255, 0.05);
  background-size: 200% 200%;
  animation: ucLoadingSnimation 2.2s ease-in-out infinite;
  border-bottom: 2px solid var(--ff-accent-color);
} */


/* Key mode indicator */
#navigator-toolbox[data-key-mode=""]::after {
  display: none;
}
#navigator-toolbox[data-key-mode]::after {
  content: attr(data-key-mode);
  vertical-align: middle;
  font-size: 0.73rem;
  background-color: var(--ff-accent-color);
  color: #ddd;
  padding: 2px 5px;
  top: 0;
  position: absolute;
  right: 0;
  /* transform: translateY(-50%); */
}

/* Private browsing indicator */
#main-window[privatebrowsingmode="temporary"] #navigator-toolbox {
  --toolbar-bgcolor: var(--ff-bg-private) !important;
}
#main-window[privatebrowsingmode="temporary"] #browser {
  background-color: var(--ff-bg-private) !important;
}
#main-window[privatebrowsingmode="temporary"] #sidebar-main {
  background: var(--ff-bg-private) !important;
}
#main-window[privatebrowsingmode="temporary"] #sidebar-box {
  background: var(--ff-bg-private) !important;
}


/* Tab counter */
#tabbrowser-tabs {
  counter-reset: section;
}

.tabbrowser-tab::before {
  counter-increment: section;
  content: counter(section);
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: bolder;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  font-size: 0.6rem;
  background: var(--ff-bg-color);
  border: 1px solid #555;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}