html,
body {
  --toolbarbutton-border-radius: 50% !important;
  --#{$prefix}-circle-size: 0;
}

html,
body {
  --#{$prefix}-circle-icon: url("icons/circle-dark.svg");
}

@media (prefers-color-scheme: light) {

  html,
  body {
    --#{$prefix}-circle-icon: url("icons/circle.svg");
  }
}

// regular style for buttons
@mixin ripple-effect {
  place-content: center !important;
  place-items: center !important;
  background-image: get-var("circle-icon"), get-var("circle-icon") !important;
  background-position: 50% !important;
  background-repeat: no-repeat !important;
  background-size: get-var("circle-size") !important;
  border-radius: var(--toolbarbutton-border-radius) !important;

  transition-property: background-size, background-color !important;
  transition-duration: get-var("short-duration"), get-var("short-duration") !important;
  transition-timing-function: get-var("fade-in-out"), ease !important;

  @include moz-pref-media("userChrome.ui-no-ripple") {
    transition-duration: 0ms, get-var("short-duration") !important;
  }
}

// add style for buttons
@mixin ripple-effect-for-button {
  @include ripple-effect();

  &:is(:active:hover, [checked], [open]):not([disabled]) {
    --#{$prefix}-circle-size: 100%;
  }

  &:hover {
    background-color: get-var("control-background-color") !important;
  }
}

// add style for exception buttons, for icon or badge-stack selectors
@mixin ripple-effect-for-icon {
  &> :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) {
    @include ripple-effect();
  }

  &:is(:active:hover, [checked], [open]):not([disabled])> :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) {
    --#{$prefix}-circle-size: 100%;
  }

  &:not([disabled], #tabs-newtab-button, #new-tab-button):hover> :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) {
    background-color: get-var("control-background-color") !important;
  }
}

// effect for url bar buttons, tab scroll buttons & bookmarkbar
// #PlacesChevron:not([collapsed]),
#PlacesToolbarItems>.bookmark-item,
:is(.identity-box-button,
  #notification-popup-box,
  #tracking-protection-icon-container,
  #pageActionButton,
  #urlbar-zoom-button,
  .urlbar-page-action,
  // #scrollbutton-up,
  // #scrollbutton-down,
  .tab-close-button,
  .tab-icon-overlay):not([disabled]) {
  @include ripple-effect-for-button();
}

// effect for other nav bar buttons
.findbar-find-next,
.findbar-find-previous,
.findbar-closebutton,
.toolbarbutton-1:not(#alltabs-button) {
  @include ripple-effect-for-icon();
}

// hide default findbar buttons hover background
.findbar-find-next,
.findbar-find-previous,
.findbar-closebutton {
  &:hover {
    background: transparent !important;
  }
}

//
@include moz-pref-media("not userChrome.theme-default") {
  @include moz-pref-media("userChrome.ui-chrome-refresh") {

    html,
    body {
      --#{$prefix}-circle-icon-refresh: url("icons/circle-refresh.svg");
    }

    #tabs-newtab-button,
    #new-tab-button {
      @include ripple-effect-for-icon();

      &> :is(.toolbarbutton-icon, .toolbarbutton-badge-stack) {
        background-image: get-var("circle-icon-refresh"),
          get-var("circle-icon-refresh") !important;
      }
    }
  }
}