/* 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://messenger/content/unifiedtoolbar/unifiedToolbarWebextensions.css");

/* Styles shared between the actual unfied toolbar and the replica in the
 * customization overlay */

:root {
  --toolbar-button-badge-text-color: var(--color-white);
  --toolbar-button-badge-bg-color: var(--color-red-70);
  --toolbar-button-badge-padding: 1px 3px;
  --toolbar-button-badge-font: 0.8rem;
  --badge-inset-block-start: 1px;
  --badge-inset-inline-nudge: 0px;
  --badge-inset-inline-end: 2px;
}

/* UI Density customization */
:root[uidensity="compact"] {
  --badge-inset-block-start: 0px;
  --badge-inset-inline-nudge: 4px;
  --badge-inset-inline-end: 0px;
}

:root[uidensity="touch"] {
  --badge-inset-block-start: 4px;
  --badge-inset-inline-nudge: -3px;
  --badge-inset-inline-end: 3px;
}

@media (-moz-windows-accent-color-in-titlebar) {
  /* Apply everywhere */
  :root {
    --windows-accent-outline-color: var(--focus-outline-color);
  }
  /* Apply only in unified toolbar */
  .search-bar {
    --windows-accent-outline-color: accentColorText;
  }
}

.unified-toolbar {
  display: flex;
  justify-content: start;
  align-items: center;
  list-style-type: none;
  overflow: hidden;
  flex-wrap: nowrap;
  min-width: 0;
}

.unified-toolbar li {
  padding: 0;
  margin: 0;
  border-radius: 1px;
}

.unified-toolbar [is="customizable-element"] .preview {
  display: none;
}

.unified-toolbar-button {
  display: flex;
  gap: 3px;
  align-items: center;
  flex-wrap: nowrap;
  min-width: initial;
  fill-opacity: var(--toolbarbutton-icon-fill-opacity);
}

.icons-above-text .unified-toolbar-button {
  flex-direction: column;
  justify-content: space-around;
}

.icons-only .unified-toolbar-button .button-label {
  display: none;
}

.text-only .unified-toolbar-button .button-icon {
  display: none;
}

.unified-toolbar-button[popup] {
  padding-inline-end: 20px;
  background-image: var(--icon-nav-down-sm);
  background-position: calc(100% - 4px) center;
  background-repeat: no-repeat;
}

.unified-toolbar-button[popup]:dir(rtl) {
  background-position-x: 4px;
}

.unified-toolbar-button[badge] {
  position: relative;
}

.unified-toolbar-button[badge]::after {
  content: attr(badge);
  background-color: var(--toolbar-button-badge-bg-color);
  border-radius: 12px;
  padding: var(--toolbar-button-badge-padding);
  font-weight: 600;
  font-size: var(--toolbar-button-badge-font);
  color: var(--toolbar-button-badge-text-color);
  line-height: 1em;
  position: absolute;
  inset-inline-end: var(--badge-inset-inline-end);
  inset-block-start: var(--badge-inset-block-start);
  max-width: 3ch;
  overflow: hidden;
  text-overflow: ellipsis;
  text-overflow: clip;
}

.unified-toolbar-button[popup][badge]::after {
  inset-inline-end: 14px;
}

.unified-toolbar-button[badge]:-moz-window-inactive::after {
  background-color: color-mix(in srgb, var(--toolbar-button-badge-bg-color) 50%, black);
}

/* If the text is shown after the icon, move the badge to be over the icon */
.icons-beside-text .unified-toolbar-button[badge]::after {
  inset-inline-end: unset;
  inset-inline-start: calc(var(--icon-size) - var(--badge-inset-inline-nudge));
  inset-block-start: var(--badge-inset-block-start);
}

/* With text only, just show the badge after the label */
.text-only .unified-toolbar-button[badge]::after {
  position: static;
}

/* If we are showing the text below the icon, move the badge in toward the
 * center of the button. */
.icons-above-text .unified-toolbar-button[badge]::after {
  inset-inline-end: unset;
  inset-inline-start: 51%;
}

.icons-above-text .unified-toolbar-button[popup][badge]::after {
  inset-inline-start: unset;
  inset-inline-end: 38%;
}

.unified-toolbar-button .button-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  max-width: 50ch;
  pointer-events: none;
}

global-search-bar:not([hidden]) {
  display: block;
  color: var(--layout-color-0);
}

global-search-bar:not([hidden]):-moz-lwtheme {
  color: var(--toolbar-field-color);
  text-shadow: none;
}

kbd {
  background-color: var(--layout-background-3);
  color: var(--layout-color-2);
  text-transform: uppercase;
  font-size: 0.8rem;
  line-height: 1;
  font-weight: bold;
  box-shadow: inset 0px -1px 0px var(--layout-border-2);
  border-radius: 3px;
  display: inline-block;
  padding: 2px 4px;
}

kbd:first-of-type {
  margin-inline-start: 6px;
}

span[slot="placeholder"] {
  display: flex;
  align-items: center;
  gap: 3px;
}

.unified-toolbar .spacer {
  flex: 1 1 auto;
}

.unified-toolbar .search-bar {
  flex: 1 1 33%;
  min-width: 5em;
}

.unified-toolbar .button-icon {
  content: var(--icon-extension);
}

.unified-toolbar .search-button-icon {
  content: var(--icon-search);
}

.unified-toolbar .write-message .button-icon {
  content: var(--icon-new-mail);
}

.unified-toolbar .move-to .button-icon {
  content: var(--icon-file);
}

.unified-toolbar .unifinder .button-icon {
  content: var(--icon-search);
}

.unified-toolbar .folder-location .button-icon {
  content: var(--icon-folder);
}

.unified-toolbar .edit-event .button-icon {
  content: var(--icon-pencil);
}

.unified-toolbar .get-messages .button-icon {
  content: var(--icon-cloud-download);
}

.unified-toolbar .reply .button-icon {
  content: var(--icon-reply);
}

.unified-toolbar .reply-all .button-icon {
  content: var(--icon-reply-all);
}

.unified-toolbar .reply-to-list .button-icon {
  content: var(--icon-reply-list);
}

.unified-toolbar .redirect .button-icon {
  content: var(--icon-redirect);
}

.unified-toolbar .archive .button-icon {
  content: var(--icon-archive);
}

.unified-toolbar .conversation .button-icon {
  content: var(--icon-conversation);
}

.unified-toolbar .previous-unread .button-icon {
  content: var(--icon-nav-up-unread);
}

.unified-toolbar .previous .button-icon {
  content: var(--icon-nav-up);
}

.unified-toolbar .next-unread .button-icon {
  content: var(--icon-nav-down-unread);
}

.unified-toolbar .next .button-icon {
  content: var(--icon-nav-down);
}

.unified-toolbar .junk .button-icon {
  content: var(--icon-spam);
}

.unified-toolbar .delete .button-icon {
  content: var(--icon-trash);
}

.unified-toolbar .compact .button-icon {
  content: var(--icon-compress);
}

.unified-toolbar .add-as-event .button-icon {
  content: var(--icon-new-event);
}

.unified-toolbar .add-as-task .button-icon {
  content: var(--icon-new-task);
}

.unified-toolbar .tag-message .button-icon {
  content: var(--icon-tag);
}

.unified-toolbar .forward-inline .button-icon {
  content: var(--icon-forward);
}

.unified-toolbar .forward-attachment .button-icon {
  /* TODO separate icon for forwarding as attachment */
  content: var(--icon-forward);
}

.unified-toolbar .mark-as .button-icon {
  content: var(--icon-unread);
}

.unified-toolbar .view-picker .button-icon {
  content: var(--icon-eye);
}

.unified-toolbar .address-book .button-icon {
  content: var(--icon-address-book);
}

.unified-toolbar .chat .button-icon {
  content: var(--icon-chat)
}

.unified-toolbar .add-ons-and-themes .button-icon {
  content: var(--icon-extension);
}

.unified-toolbar .calendar .button-icon {
  content: var(--icon-calendar);
}

.unified-toolbar .tasks .button-icon {
  content: var(--icon-tasks)
}

.unified-toolbar .mail .button-icon {
  content: var(--icon-mail);
}

.unified-toolbar .print .button-icon {
  content: var(--icon-print);
}

.unified-toolbar .quick-filter-bar .button-icon {
  content: var(--icon-filter);
}

.unified-toolbar .synchronize .button-icon {
  content: var(--icon-sync);
}

.unified-toolbar .new-event .button-icon {
  content: var(--icon-new-event);
}

.unified-toolbar .new-task .button-icon {
  content: var(--icon-new-task);
}

.unified-toolbar .delete-event .button-icon {
  content: var(--icon-trash);
}

.unified-toolbar .print-event .button-icon {
  content: var(--icon-print);
}

.unified-toolbar .go-to-today .button-icon {
  content: var(--icon-calendar-today);
}

.unified-toolbar .go-back .button-icon {
  content: var(--icon-nav-back);
}

.unified-toolbar .go-forward .button-icon {
  content: var(--icon-nav-forward);
}

.unified-toolbar .stop .button-icon {
  content: var(--icon-close);
}

.unified-toolbar .throbber .throbber-icon {
  stroke: var(--button-primary-background-color);
  -moz-context-properties: stroke, fill;
  width: 16px;
  height: 16px;
  visibility: hidden;
  margin: var(--button-margin);
  vertical-align: middle;
  content: var(--icon-loading);
  object-fit: cover;
}

.unified-toolbar .throbber.busy .throbber-icon {
  visibility: visible;
  object-position: 0px 0;
}

@media (prefers-reduced-motion: no-preference) {
  .unified-toolbar .throbber.busy .throbber-icon {
    animation: activity-indicator-throbber 1.05s steps(30) infinite;
  }

  @keyframes activity-indicator-throbber {
    100% { object-position: -480px 0; }
  }
}