/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@import url("chrome://browser/skin/browser-shared.css");
@import url("chrome://browser/skin/contextmenu.css");

/**
 * We still want to do some of the tweaks that browser-colors does, like
 * disabling the toolbar field border and backgrounds.
 */
@media not (prefers-contrast) {
  :root:not([lwtheme]) {
    @media (-moz-gtk-theme-family) {
      --tabs-navbar-separator-style: none;
      @media (prefers-color-scheme: light) {
        --urlbar-box-bgcolor: #fafafa;
      }
    }
  }
}

#menubar-items {
  flex-direction: column; /* for flex hack */
  justify-content: normal; /* align the menubar to the top also in customize mode */
}

/**
 * Titlebar drawing. GTK windows have both a window radius (exposed via the
 * `-moz-gtk-csd-titlebar-radius`) environment variable, and a window shadow
 * (which we can't read back from GTK).
 */
@media (-moz-gtk-csd-transparency-available) {
  :root[customtitlebar] {
    background-color: transparent;

    &[sizemode="normal"]:not([gtktiledwindow]) {
      /* Firefox draws its contents to a child window, while GTK takes care of
       * drawing the toplevel (which in most cases is just the window
       * decorations).
       *
       * Due to how X11 child windows work, pixels painted by a child window will
       * never be drawn by its toplevel, even in compositing window managers.
       * That means that we need to draw the part of the decorations that fall
       * into our client area ourselves, which is what this does.
       *
       * Alternatives to this would be:
       *  * Using the XComposite extension
       *  * Drawing to the toplevel window buffer directly
       *  * Approximating the corners with gdk_window_shape_combine_region
       *
       * None of them being particularly appealing.
       *
       * On Wayland we render to a subsurface which gets properly composited
       * atop our toplevel, so there's no issue there (MozWindowDecorations
       * does nothing).
       */
      -moz-default-appearance: -moz-window-decorations;
      appearance: auto;

      body,
      dialog::backdrop {
        border-top-left-radius: env(-moz-gtk-csd-titlebar-radius);
        border-top-right-radius: env(-moz-gtk-csd-titlebar-radius);
        /* stylelint-disable-next-line media-query-no-invalid */
        @media -moz-pref("widget.gtk.rounded-bottom-corners.enabled") {
          /* Use an uniform clip to allow WebRender to optimize it better */
          border-radius: env(-moz-gtk-csd-titlebar-radius);
        }
      }
    }
  }
}

/* Bookmark menus */
.bookmark-item {
  &:is(menu, menuitem) {
    min-width: 0;
    max-width: 32em;
  }

  &:not(.subviewbutton) > .menu-icon {
    margin-block: 0;
  }

  /* Bookmark drag and drop styles */
  &[dragover-into="true"] {
    background: SelectedItem !important;
    color: SelectedItemText !important;
  }
}

/* Address bar */
.urlbar,
#searchbar {
  font-size: 1.05em;
}

/* AutoComplete */

#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
  border-top: 1px solid ThreeDShadow;
}

/* Tabstrip */

#tabbrowser-tabs {
  /* override the native styling */
  border-bottom: 0;
}

#TabsToolbar {
  min-height: 0;
}

.browser-titlebar,
#main-menubar {
  appearance: none;
  background-color: transparent;
  color: inherit;
}

/* All tabs menupopup */

.alltabs-item[selected="true"] {
  font-weight: var(--font-weight-bold);
}

#UITourHighlight {
  /* Below are some fixes for people without an X compositor on Linux.
     This is why we can't have nice things: */
  /* Animations don't repaint properly without an X compositor. */
  animation-name: none !important;
  /* Opacity rounds to 0 or 1 on Linux without an X compositor, making the
     background color not visible. Anti-aliasing is not available either. Make a
     thicker outline and cancel border-radius for that case. */
  outline: 4px solid rgb(0, 200, 215);
  border-radius: 0 !important;
}

#UITourTooltipDescription {
  font-size: 1.05rem;
}

#UITourTooltipClose {
  margin-inline-end: -4px;
}

/**
 * Override the --arrowpanel-padding so the background extends
 * to the sides and bottom of the panel.
 */
#UITourTooltipButtons {
  margin-inline-start: -10px;
  margin-bottom: -10px;
}

/* The button box must appear on top of the navigator-toolbox in order for
 * click and hover mouse events to work properly for the button in the restored
 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
 * can swallow those events. */
.titlebar-buttonbox {
  z-index: 1;
  align-items: stretch;
  /* In libadwaita buttons are 24px big and spacing is
   * 3px of gap + 5px * 2 of padding = 13px / 2, see:
   * https://gitlab.gnome.org/GNOME/libadwaita/-/blob/fe21c3c823443a8f2333cf3cc09ba3d0fa753228/src/stylesheet/widgets/_header-bar.scss#L164
   * We want a contiguous hit region so we use 6.5px of padding instead. */
  --titlebar-button-size: 24px;
  --titlebar-button-spacing: 6.5px;
  --titlebar-button-end-spacing: 10px;
  @media (-moz-gtk-theme-family: breeze) {
    /* On breeze, titlebar button size and spacing depends on the font, see:
     *  * https://invent.kde.org/plasma/kdecoration/-/blob/28898c2492708f6a1603458baa535a8504e8d638/src/decorationsettings.cpp#L18-33
     *  * https://invent.kde.org/plasma/breeze/-/blob/156193c14942cbc836cf131e92e16fc3310513ed/kdecoration/breezedecoration.cpp#L734-750
     *  * https://invent.kde.org/plasma/breeze/-/blob/156193c14942cbc836cf131e92e16fc3310513ed/kdecoration/breeze.h#L34
     * Since we don't have the height of the "M" glyph, we approximate using
     * ems snapped to device pixels for crisp rendering. */
    /* The button size is also the grid unit */
    --titlebar-button-size: round(1.3em, 2 * env(hairline));
    /* The spacing is half the button size. Since we apply it to each side,
     * it's that divided by 2 */
    --titlebar-button-spacing: calc(var(--titlebar-button-size) / 4);
    /* End spacing is 2 * smallSpacing, which is max(2px, clamp(grid-unit / 4)). */
    --titlebar-button-end-spacing: calc(2 * max(2px, round(down, var(--titlebar-button-size) / 4, env(hairline))));
  }
  --max-titlebar-button-position: max(
    env(-moz-gtk-csd-maximize-button-position),
    env(-moz-gtk-csd-minimize-button-position),
    env(-moz-gtk-csd-close-button-position)
  );
}

@media (-moz-gtk-csd-reversed-placement) {
  .titlebar-buttonbox-container {
    order: -1;
  }
}

.titlebar-button {
  appearance: none;
  color: inherit;
  align-items: center;
  padding: 0;
  padding-inline: var(--titlebar-button-spacing);
  padding-inline-end: max(
    var(--titlebar-button-spacing),
    var(--titlebar-button-end-spacing) * (var(--titlebar-button-position) - var(--max-titlebar-button-position) + 1)
  );
  order: var(--titlebar-button-position);
  /* In GTK applications, you can drag the window by titlebar buttons */
  -moz-window-dragging: drag;

  > .toolbarbutton-icon {
    border-radius: var(--border-radius-circle);
    background-position: center center;
    background-size: min(16px, var(--titlebar-button-size) - 2 * env(hairline));
    background-repeat: no-repeat;
    -moz-context-properties: stroke;
    stroke: currentColor;
    width: var(--titlebar-button-size);
    height: var(--titlebar-button-size);

    @media not (-moz-gtk-theme-family: breeze) {
      /* Matches the libadwaita transition */
      transition: background-color 0.2s ease;
    }

    @media (-moz-gtk-theme-family: adwaita) or (-moz-gtk-theme-family: yaru) {
      /* On Adwaita / Yaru, the titlebar buttons have a background by default */
      background-color: color-mix(in srgb, currentColor 10%, transparent);
    }
  }

  &:hover > .toolbarbutton-icon {
    background-color: color-mix(in srgb, currentColor 15%, transparent);
  }

  &:hover:active > .toolbarbutton-icon {
    background-color: color-mix(in srgb, currentColor 30%, transparent);
  }

  &:focus-visible > .toolbarbutton-icon {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-inset);
  }

  @media (-moz-gtk-theme-family: breeze) {
    &:hover > .toolbarbutton-icon {
      color: var(--toolbox-bgcolor);
      background-color: var(--toolbox-textcolor);
      &:-moz-window-inactive {
        color: var(--toolbox-bgcolor-inactive);
        background-color: var(--toolbox-textcolor-inactive);
      }
    }
    &:hover:active > .toolbarbutton-icon {
      background-color: color-mix(in srgb, var(--toolbox-textcolor) 50%, transparent);
    }
    &.titlebar-close:hover > .toolbarbutton-icon {
      background-color: #ff98a2;
    }
    &.titlebar-close:hover:active > .toolbarbutton-icon {
      background-color: #6d2229;
    }
  }
}

.titlebar-restore,
.titlebar-max {
  --titlebar-button-position: env(-moz-gtk-csd-maximize-button-position);

  > .toolbarbutton-icon {
    background-image: -moz-symbolic-icon(window-maximize-symbolic);
  }

  @media not (-moz-gtk-csd-maximize-button) {
    display: none;
  }
}

.titlebar-restore > .toolbarbutton-icon {
  background-image: -moz-symbolic-icon(window-restore-symbolic);
}

.titlebar-close {
  --titlebar-button-position: env(-moz-gtk-csd-close-button-position);

  > .toolbarbutton-icon {
    background-image: -moz-symbolic-icon(window-close-symbolic);
  }

  @media not (-moz-gtk-csd-close-button) {
    display: none;
  }
}

.titlebar-min {
  --titlebar-button-position: env(-moz-gtk-csd-minimize-button-position);

  > .toolbarbutton-icon {
    background-image: -moz-symbolic-icon(window-minimize-symbolic);
  }

  @media not (-moz-gtk-csd-minimize-button) {
    display: none;
  }
}

.titlebar-return-to-opener {
  --titlebar-button-position: env(-moz-gtk-csd-minimize-button-position);
}