/* 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/. */

/* This is the main stylesheet in the unified-toolbar-customization-pane shadowRoot. */

@import url("chrome://messenger/skin/widgets.css");
@import url("chrome://messenger/skin/shared/unifiedToolbarCustomizableItems.css");
@import url("chrome://messenger/skin/shared/unifiedToolbarShared.css");

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

.palette-search {
  display: block;
  margin: 12px 0;
  max-width: 50ch;
  height: 2em;
  width: 100%;
  align-self: center;
}

[is="customization-target"],
[is="customization-palette"] {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

[is="customization-target"]:focus-visible,
[is="customization-palette"]:focus-visible {
  outline: var(--focus-outline);
  outline-color: transparent;
}

.toolbar-target {
  /* TODO this should match actual titlebar dimensions */
  background: var(--layout-background-3);
  border-radius: 6px;
  padding-inline: 9px;
  padding-block: var(--unified-toolbar-padding);
  margin: 1rem;
  max-width: 100vw;
  border: 1px solid var(--layout-border-0);
  gap: 6px;
  min-height: calc(1rem + 3 * var(--button-padding));
}

.toolbar-target .button.unified-toolbar-button {
  margin-block: 0;
}

.toolbar-target .spacer {
  color: color-mix(in srgb, var(--layout-color-1) 50%, transparent);
  background-image: linear-gradient(to left, currentColor 0%, currentColor 50%, transparent 50%, transparent 100%);
  background-size: 9px 1px;
  background-position: 5px center;
  background-repeat: repeat-x;
  position: relative;
  height: 100%;
  -moz-context-properties: stroke;
  stroke: currentColor;
}

.toolbar-target .spacer::before,
.toolbar-target .spacer::after {
  content: '';
  width: 16px;
  position: absolute;
  height: 100%;
  background-repeat: no-repeat;
  background-position-y: center;
}

.toolbar-target .spacer::before {
  background-image: var(--icon-nav-left);
  left: -5px;
}

.toolbar-target .spacer::after {
  background-image: var(--icon-nav-right);
  right: -5px;
}

.toolbar-target .throbber .throbber-icon {
  visibility: visible;
}

/* buttons are disabled in the preview, but we want them to look active. */
.toolbar-target .unified-toolbar-button[disabled] {
  color: inherit;
  opacity: 1;
}

[is="customization-target"] [is="customizable-element"] .live-content {
  pointer-events: none;
}

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

[is="customization-target"] .collapsed {
  display: none;
}

.customization-palettes {
  overflow: auto;
}

[is="customization-palette"] {
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1rem;
}

[is="customization-palette"]:not(:last-of-type) {
  margin-block-end: 2.5rem;
}

h2 {
  margin-inline: 1rem;
  user-select: none;
}

[is="customizable-element"] {
  margin: 0;
  padding: 0;
}

[is="customization-target"]:focus-within [is="customizable-element"][aria-selected="true"],
[is="customization-palette"]:focus-within [is="customizable-element"][aria-selected="true"] {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

[is="customization-palette"] [is="customizable-element"] {
  width: 96px;
  height: calc(25px + 2.4rem); /* icon: 16px, gap: 9px, 2.4rem = ~2lh */
  background: var(--layout-background-3);
  padding: 9px;
  border-radius: 6px;
  overflow: hidden;
}

[is="customization-palette"] [is="customizable-element"] .live-content {
  display: none;
}

.preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
  gap: 9px;
  -moz-context-properties: fill, stroke;
  fill: color-mix(in srgb, currentColor 20%, transparent);
  stroke: currentColor;
}

.preview-icon {
  height: 16px;
  width: 16px;
  object-fit: contain;
  pointer-events: none;
}

.preview-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  user-select: none;
  padding-inline: 3px;
  max-width: 100%;
}

/* Drag and drop state styling */

.drop-before {
  border-inline-start: 1px solid currentColor;
}

.drop-after {
  border-inline-end: 1px solid currentColor;
}

.dragging {
  visibility: hidden;
}