/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/buttonlike_toolbarbuttons.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* This style makes buttons look like real buttons with border and background. Color of border and background use the same colors as unselected urlbar to make them fit together. */

:root{
  --uc-toolbarbutton-vertical-padding: var(--toolbarbutton-inner-padding);
  --uc-toolbarbutton-horizontal-padding: calc(var(--toolbarbutton-inner-padding) + 10px);
  --toolbarbutton-border-radius: 3px !important;
}
:root[uidensity="compact"]{
  --uc-toolbarbutton-vertical-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
  --uc-toolbarbutton-horizontal-padding: calc(var(--toolbarbutton-inner-padding) + 6px);
}

.browser-toolbar{
  --toolbarbutton-icon-fill: var(--toolbar-field-color);
}

/* size of buttons */

findbar toolbarbutton,
.toolbarbutton-1 > .toolbarbutton-icon,
.toolbarbutton-1 > .toolbarbutton-badge-stack{
  background-color: var(--toolbar-field-background-color, hsla(0,0%,100%,.8));
  width: calc(2* var(--uc-toolbarbutton-horizontal-padding) + 16px) !important;
  height: calc(2* var(--uc-toolbarbutton-vertical-padding) + 16px) !important;
  fill-opacity: 0.8;
  margin-inline: 2px;
}

.toolbarbutton-1.toolbarbutton-combined > :is(.toolbarbutton-icon,.toolbarbutton-badge-stack){
  margin-inline: 0 !important;
  border-radius: 0 !important;
  border-inline-end-width: 0 !important;
}
.toolbarbutton-1.toolbarbutton-combined:first-child > :is(.toolbarbutton-icon,.toolbarbutton-badge-stack){
  border-top-left-radius: var(--toolbarbutton-border-radius) !important;
  border-bottom-left-radius: var(--toolbarbutton-border-radius) !important;
}
.toolbarbutton-1.toolbarbutton-combined:last-child > :is(.toolbarbutton-icon,.toolbarbutton-badge-stack){
  border-top-right-radius: var(--toolbarbutton-border-radius) !important;
  border-bottom-right-radius: var(--toolbarbutton-border-radius) !important;
  border-inline-end-width: 1px !important;
}

.toolbarbutton-1.toolbarbutton-combined-buttons-dropmarker > .toolbarbutton-icon{
  padding-inline: 3px !important;
  margin-inline: 0 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  width: revert !important;
}

/* borders */
findbar toolbarbutton,
.toolbarbutton-1 > .toolbarbutton-icon{
  border: 1px solid var(--toolbar-field-border-color, hsla(240,5%,5%,.55));
}

/* stacks use box-shadow as a border to prevent size from changing */
.toolbarbutton-1 > .toolbarbutton-badge-stack{
  box-shadow: inset 0 0 0 1px var(--toolbar-field-border-color, hsla(240,5%,5%,.55));
}

/* modify paddings within buttons */
.toolbarbutton-1 > .toolbarbutton-icon,
.toolbarbutton-1 > .toolbarbutton-badge-stack{
  padding: var(--uc-toolbarbutton-vertical-padding) var(--uc-toolbarbutton-horizontal-padding) !important;
}

/* Remove styles from buttons inside extensions and overflow menu */
:is(#unified-extensions-panel,.widget-overflow-list) .toolbarbutton-1 > .toolbarbutton-icon,
:is(#unified-extensions-panel,.widget-overflow-list) .toolbarbutton-1 > .toolbarbutton-badge-stack{
  background-color: transparent;
  width: revert !important;
  height: revert !important;
  padding: 0 !important;
  border: none;
}

/* Special cases */

#tabs-newtab-button > .toolbarbutton-icon{
  background-color: transparent;
}
.webextension-browser-action{
  background: transparent !important;
}
#zoom-reset-button > .toolbarbutton-text{
  background-color: var(--toolbar-field-background-color, hsla(0,0%,100%,.8));
  border: 1px solid var(--toolbar-field-border-color, hsla(240,5%,5%,.55));
  border-right-width: 0;
  border-radius: 0 !important;
}
findbar toolbarbutton{
  background-color: var(--input-bgcolor,var(--toolbarbutton-bgcolor));
}

#profiler-button-button:not(.profiler-active) > image{
  border-radius: 0 var(--toolbarbutton-border-radius) var(--toolbarbutton-border-radius) 0 !important;
  border-inline-width: 0 1px !important;
}
#tabs-newtab-button > .toolbarbutton-icon{
  width: revert !important;
  height: revert !important;
  border: revert !important;
  padding: var(--toolbarbutton-inner-padding) !important;
}
findbar toolbarbutton{
  padding-inline: var(--uc-toolbarbutton-horizontal-padding) !important;
  height: revert !important;
  margin-inline: 1px 0px !important;
  border-width: 1px !important;
}
.findbar-closebutton{
  margin-inline-end: 8px !important;
}