.tor-urlbar-button {
  &:not([hidden]) {
    display: flex;
  }
  align-self: stretch;
  align-items: center;
  gap: var(--space-small);
  border-radius: var(--urlbar-inner-border-radius);
  outline: var(--toolbarbutton-outline);
  outline-offset: var(--toolbarbutton-outline-offset);
  --tor-urlbar-focus-outline-difference: 0px;
  /* 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(--space-small) - var(--tor-urlbar-focus-outline-difference));
  margin: var(--tor-urlbar-focus-outline-difference);

  &: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-style: solid;
    outline-width: var(--focus-outline-width);
    outline-offset: var(--focus-outline-offset);
    /* 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));
  }

  &:not(.tor-button) {
    /* Make the button look plain like the identity .identity-box-button. */
    background-color: var(--urlbar-box-background-color);
    color: var(--urlbar-box-text-color);

    :where(#urlbar[focused]) & {
      background-color: var(--urlbar-box-background-color-focus);
    }

    &:focus-visible {
      outline-color: var(--focus-outline-color);
    }

    &:hover {
      background-color: var(--urlbar-box-background-color-hover);
      color: var(--urlbar-box-text-color-hover);
      outline-color: var(--toolbarbutton-outline-color-hover);
    }

    &:hover:active {
      background-color: var(--urlbar-box-background-color-active);
      color: var(--urlbar-box-text-color-hover);
      outline-color: var(--toolbarbutton-outline-color-active);
    }
  }

  &.tor-button:not(:focus-visible) {
    /* Set the outline color based on a primary button. */
    outline-color: var(--button-border-color-primary);

    &:hover {
      outline-color: var(--button-border-color-primary-hover);
    }

    &:hover:active {
      outline-color: var(--button-border-color-primary-active);
    }
  }
}

.tor-urlbar-button > * {
  flex: 0 0 auto;
  margin-inline: 0;
  /* 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;
}
