.tor-urlbar-button:not([hidden]) {
  --tor-urlbar-button-background-color: var(--purple-60);
  background-color: var(--tor-urlbar-button-background-color);
  /* FIXME: Use different colors for light and dark theme, rather than "white".
   * See tor-browser#41787 */
  color: white;
  display: flex;
  align-items: center;
  gap: 0.5em;
  border-radius: var(--urlbar-icon-border-radius);
  --tor-urlbar-button-inline-padding: 8px;
  padding-inline: var(--tor-urlbar-button-inline-padding);
  margin: 0;
}

.tor-urlbar-button > * {
  flex: 0 0 auto;
  margin: 0;
}

.tor-urlbar-button:focus-visible {
  /* This button lies within the urlbar, so if the outline extends beyond the
   * button's boundary, it will be clipped by the urlbar.
   * Most button's in the urlbar get around this by using --focus-outline-inset,
   * but our button has a purple background, which does not contrast well with
   * the focus outline.
   * Therefore, we use an offset outline rather than an inset outline, and
   * compensate by shrinking the button's width and height so that the outline
   * fits within the non-focused button boundary. Essentially, this has a
   * similar effect to using an inset outline that matches the color of the
   * urlbar background, but we keep the rounded corners. */
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  /* Use the background color for the outline, same as in-content buttons. */
  outline-color: var(--tor-urlbar-button-background-color);
  /* Calculate the difference between the button's border area and the outline
   * area. */
  --tor-urlbar-focus-outline-difference: calc(
    var(--focus-outline-offset)
    + var(--focus-outline-width)
  );
  /* For the inline direction, we shrink the padding by the difference, and
   * increase the margin by the same amount so that the button text remains in
   * the same position.
   * For the block direction, the height of the button is flexibly sized with
   * the urlbar height, so we should only need to increase the margin. */
  padding-inline: calc(
    var(--tor-urlbar-button-inline-padding)
    - var(--tor-urlbar-focus-outline-difference)
  );
  margin: var(--tor-urlbar-focus-outline-difference);
}

.tor-urlbar-button:focus-visible > * {
  /* Negate the margin that would be added on focus to ensure the button does
   * not grow in height.
   * Ideally, this should not change anything noticeable, otherwise the text
   * could be clipped when focused. */
  margin-block: calc(-1 * var(--tor-urlbar-focus-outline-difference));
}

#urlbar[usertyping] .tor-urlbar-button {
  /* Hide whilst the user is typing in the url bar. */
  display: none;
}

.tor-urlbar-button:hover {
  --tor-urlbar-button-background-color: var(--purple-70);
}

.tor-urlbar-button:hover:active {
  --tor-urlbar-button-background-color: var(--purple-80);
}

@media (prefers-color-scheme: dark) {
  .tor-urlbar-button {
    --tor-urlbar-button-background-color: var(--purple-50);
  }

  .tor-urlbar-button:hover {
    --tor-urlbar-button-background-color: var(--purple-60);
  }

  .tor-urlbar-button:hover:active {
    --tor-urlbar-button-background-color: var(--purple-70);
  }
}

/* Make the button look plain like the identity #urlbar-label-box. */
.tor-urlbar-button.tor-urlbar-button-plain {
  --tor-urlbar-button-background-color: var(--urlbar-box-bgcolor);
  color: var(--urlbar-box-text-color);
}

.tor-urlbar-button.tor-urlbar-button-plain:focus-visible {
  outline-color: var(--focus-outline-color);
}

.tor-urlbar-button.tor-urlbar-button-plain:hover {
  --tor-urlbar-button-background-color: var(--urlbar-box-hover-bgcolor);
  color: var(--urlbar-box-hover-text-color);
}

.tor-urlbar-button.tor-urlbar-button-plain:hover:active {
  --tor-urlbar-button-background-color: var(--urlbar-box-active-bgcolor);
  color: var(--urlbar-box-hover-text-color);
}
