.ads-context-menu-wrapper {
  margin-block-start: var(--space-xsmall);
  text-align: end;
}

.ads-context-menu {
  float: right;
  position: relative;

  .context-menu {
    /* Position the menu just under and to the right of the context menu button */
    inset-inline-end: 100%;
    inset-inline-start: auto;
    margin-inline-end: calc(-0.98 * var(--size-item-large));
    top: calc(2.25 * var(--size-item-small));
  }

  > moz-button {
    // Contrast fix for users who have wallpapers set
    @include wallpaper-contrast-fix;

    padding-block-end: var(--space-small);
  }

  // The context menu button background should be transparent by default
  // in both dark and light mode
  > moz-button::part(button) {
    background-color: transparent;
  }

  // Keep the default styles for hover/active states
  > moz-button::part(button):hover {
    background-color: var(--button-background-color-hover);
  }

  > moz-button::part(button):active {
    background-color: var(--button-background-color-active);
  }
}

.context-menu-open {
  // Once the context menu is open, make sure the menu button background is reset to default
  > moz-button::part(button) {
    background-color: var(--button-background-color);
  }
}