//-- Mixin ---------------------------------------------------------------------
@import "combined_circle_button";

@mixin _combined_forward_button() {
  @if mode.isMediaPref() {
    @#{media} #{'-moz-pref("userChrome.combined.urlbar.nav_button") or ((not -moz-pref("userChrome.combined.sub_button.as_normal")) or (-moz-pref("userChrome.combined.nav_button") and -moz-pref("userChrome.combined.urlbar.home_button")))'} {
      @content;
    }
  }
  @else if mode.isMediaBoolPref() {
    @media (-moz-bool-pref: '"userChrome.combined.urlbar.nav_button"'),
    ((not (-moz-bool-pref: '"userChrome.combined.sub_button.as_normal"')) or
     (
       (-moz-bool-pref: '"userChrome.combined.nav_button"') and
       (-moz-bool-pref: '"userChrome.combined.urlbar.home_button"')
     )
    ) {
      @content;
    }
  }
  @else {
    @supports -moz-bool-pref("userChrome.combined.urlbar.nav_button") or
    ((not -moz-bool-pref("userChrome.combined.sub_button.as_normal")) or
     (
       -moz-bool-pref("userChrome.combined.nav_button") and
       -moz-bool-pref("userChrome.combined.urlbar.home_button")
     )
    ) {
      @content;
    }
  }
}

@mixin _combined_nav_button_background($autohideOptionName) {
  > .toolbarbutton-icon {
    @include circle_button_background;
  }
  &:not([disabled], [open]):hover > .toolbarbutton-icon {
    @include circle_button_background_hover;
  }
  &[open] > .toolbarbutton-icon,
  &:not([disabled]):hover:active > .toolbarbutton-icon {
    @include circle_button_background_active;
  }

  &[disabled="true"] {
    > .toolbarbutton-icon {
      background-color:  color-mix(in srgb, var(--toolbarbutton-hover-background), var(--toolbar-field-background-color) 40%) !important;
      fill: color-mix(in srgb, var(--toolbarbutton-icon-fill), transparent 60%);
    }
    @include NotOption($autohideOptionName) {
      &[disabled="true"] {
        opacity: 1 !important; /* Original: 0.4 */
      }
    }
  }
}
@mixin _combined_forward_button_background() {
  @include _combined_nav_button_background("userChrome.autohide.forward_button");
}
@mixin _combined_back_button_background() {
  @include _combined_nav_button_background("userChrome.autohide.back_button");
}

@mixin _back_button_circle_shape() {
  @include circle_button_shape($backButton: true);
}

//------------------------------------------------------------------------------

#nav-bar-customization-target > {
  @include _combined_forward_button {
    #forward-button {
      --uc-forward-button-margin: calc(-1 * var(--uc-toolbarbutton-boundary) + 1px);

      z-index: 2;
      position: relative;

      > .toolbarbutton-icon {
        padding-inline-end: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */
        padding-block: var(--urlbar-icon-padding) !important;
        height: var(--uc-urlbar-icon-size) !important;
      }

      @include Option("userChrome.combined.urlbar.nav_button") {
        padding-inline-end: 0px !important; /* Original: var(--toolbarbutton-outer-padding) */
      }
      @include NotOption("userChrome.combined.urlbar.nav_button") {
        @include NotOption("userChrome.combined.sub_button.none_background") {
          @include Option("userChrome.combined.urlbar.home_button") {
            @include NotOption("userChrome.combined.nav_button.home_button") {
              @include _combined_forward_button_background;
            }
          }
          @include NotOption("userChrome.combined.urlbar.home_button") {
            @include _combined_forward_button_background;
          }
        }
      }

      @include NotOption("userChrome.autohide.forward_button") {
        margin-inline-start: var(--uc-forward-button-margin) !important;
      }
      @include Option("userChrome.autohide.forward_button") {
        &:not([disabled="true"]) {
          margin-inline-start: var(--uc-forward-button-margin) !important;
        }
      }
    }
  }

  #back-button {
    position: relative;

    @include NotOption("userChrome.combined.urlbar.home_button") {
      @include NotOption("userChrome.combined.nav_button.home_button") {
        @include _combined_back_button_background;
      }
    }
    @include Option(
      "userChrome.combined.nav_button.home_button",
      "userChrome.combined.urlbar.home_button"
    ) {
      z-index: 2;

      @include NotOption("userChrome.combined.sub_button.as_normal") {
        margin-inline-end: calc(-1 * var(--uc-toolbarbutton-boundary) - 1px) !important;

        @include NotOption("userChrome.combined.sub_button.none_background") {
          @include _combined_back_button_background;
        }
        > .toolbarbutton-icon {
          padding-inline-start: var(--urlbar-icon-padding) !important; /* Original: var(--toolbarbutton-inner-padding) */
          padding-block: var(--urlbar-icon-padding) !important;
          height: var(--uc-urlbar-icon-size) !important;
        }
      }
    }

    @include NotOption("userChrome.combined.nav_button.home_button") {
      @include Option("userChrome.combined.urlbar.nav_button") {
        @include NotOption("userChrome.combined.urlbar.home_button") {
          @include _back_button_circle_shape;
        }
      }
      @include NotOption("userChrome.combined.urlbar.nav_button") {
        @include _back_button_circle_shape;
      }
    }
  }
}
