/* 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/skin/shared/unifiedToolbarShared.css");

:root {
  --unified-toolbar-padding: 4px;
  --unified-drag-space: 30px;
  --unified-customization-padding: 30px;
  --unified-toolbar-content-min-height: 28px;
}

:root[uidensity="compact"] {
  --unified-toolbar-padding: 1px;
  --unified-drag-space: 15px;
  --unified-toolbar-content-min-height: 24px;
}

:root[uidensity="touch"] {
  --unified-toolbar-padding: 7px;
}

:root[sizemode="fullscreen"],
:root:not([tabsintitlebar]) {
  --unified-drag-space: 3px;
}

unified-toolbar {
  display: block;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

#unifiedToolbarContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  -moz-window-dragging: drag;
  width: 100vw;
}

/* minheight for the macOS titlebar */
.customizingUnifiedToolbar #unifiedToolbarContainer {
  min-height: 22px;
}

#unifiedToolbar {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding-block: var(--unified-toolbar-padding);
  min-width: 0;
  overflow: hidden;
}

#unifiedToolbar .button:is(.toolbar-button, .unified-toolbar-button) {
  margin-block: 0;
}

#unifiedToolbarContainer .titlebar-buttonbox-container {
  flex: 0 0 auto;
}

@media (-moz-platform: windows) {
  #unifiedToolbarContainer .titlebar-buttonbox-container {
    align-self: stretch;
  }
}

@media (-moz-gtk-csd-reversed-placement) {
  #unifiedToolbarContainer {
    flex-direction: row-reverse;
  }
}

#unifiedToolbarContent {
  flex: 1 1 auto;
  min-height: var(--unified-toolbar-content-min-height);
  margin: 0;
  /* Padding needed for the children's focus ring. */
  padding-block: 3px;
  padding-inline: var(--unified-drag-space) 3px;
}

#unifiedToolbarContent li {
  -moz-window-dragging: no-drag;
}

#unifiedToolbarContent .unified-toolbar-button[disabled] {
  opacity: 0.4;
}

#unifiedToolbarContent .spacer {
  -moz-window-dragging: drag;
}

unified-toolbar-customization {
  display: none;
}

/* customizing unified toolbar */

/* TODO this approach will have issues with spaces toolbar paddings */

/* we still need the space to be taken up for correct alignment of window decorations */
.customizingUnifiedToolbar #unifiedToolbar {
  visibility: hidden;
}

.customizingUnifiedToolbar #unifiedToolbar > *,
.customizingUnifiedToolbar #messengerBody,
.customizingUnifiedToolbar #spacesToolbar,
.customizingUnifiedToolbar #toolbar-menubar,
.customizingUnifiedToolbar #tabs-toolbar {
  display: none;
}

.customizingUnifiedToolbar unified-toolbar-customization {
  display: flex;
  height: 100%;
  background-color: color-mix(in srgb, var(--layout-background-0) 50%, var(--color-black));
  color: var(--layout-color-1);
  flex: 1;
  overflow: hidden;
  padding: var(--unified-customization-padding);
}

#customizationHeading {
  align-self: center;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--layout-color-2);
  margin-block: .5em;
}

#unifiedToolbarCustomizationContainer {
  background-color: var(--layout-background-3);
  border-radius: 6px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  --customization-footer-padding: 12px;
  box-shadow:
    0 2px 12px -3px rgba(0, 0, 0, 0.5),
    0 2px 24px -6px rgba(0, 0, 0, 0.5);
}

#unifiedToolbarCustomizationContainer div[role="tabpanel"] {
  flex-grow: 1;
}

#customizationFooter {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  background: var(--layout-background-1);
  border-radius: 0 0 6px 6px;
  /* We need at least 1rem of padding to ensure the
   * #unifiedToolbarCustomizationUnsavedChanges can be displayed in it */
  padding-block: max(calc(var(--customization-footer-padding) * 2), 1rem);
  padding-inline: var(--customization-footer-padding);
}

#buttonStyleContainer {
  display: flex;
  align-items: center;
  gap: 3px;
}

#customizationFooter div:last-child {
  text-align: end;
}

#unifiedToolbarCustomizationUnsavedChanges {
  position: fixed;
  inset-block-end: calc((var(--customization-footer-padding) * 2 - 1em) / 2 + var(--unified-customization-padding));
  inset-inline-end: calc(var(--customization-footer-padding) + var(--unified-customization-padding));
}

#customizationTabs {
  display: flex;
  flex-wrap: nowrap;
  max-width: 100vw;
  background-color: var(--tabs-toolbar-background-color);
  box-shadow: var(--tabs-toolbar-box-shadow);
  padding-top: 3px;
  padding-inline: 6px;
}

unified-toolbar-customization-pane:not([hidden]) {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--layout-background-1);
}

unified-toolbar-tab {
  min-width: 28px;
  overflow-x: hidden;
  display: block;
}

unified-toolbar-tab::part(icon) {
  -moz-context-properties: fill, stroke;
  fill: color-mix(in srgb, currentColor 20%, transparent);
  stroke: currentColor;
  content: var(--webextension-toolbar-image, var(--icon-extension));
  max-width: 16px;
  max-height: 16px;
}

#unified-toolbar-customization-tab-mail::part(icon) {
  content: var(--icon-mail);
}

#unified-toolbar-customization-tab-calendar::part(icon) {
  content: var(--icon-calendar);
}

#unified-toolbar-customization-tab-tasks::part(icon) {
  content: var(--icon-tasks);
}

#unified-toolbar-customization-tab-addressbook::part(icon) {
  content: var(--icon-address-book);
}

#unified-toolbar-customization-tab-chat::part(icon) {
  content: var(--icon-chat);
}

#unified-toolbar-customization-tab-settings::part(icon) {
  content: var(--icon-settings);
}

:is(.live-content, .button-appmenu, #spacesPinnedButton):-moz-window-inactive {
  opacity: 0.6;
}