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

@namespace html url("http://www.w3.org/1999/xhtml");

.editContactPanel_rowLabel {
  text-align: end;
}

#editContactHeader {
  display: flex;
  margin-bottom: 15px;
}

#editContactPanelIcon {
  -moz-context-properties: fill, stroke, stroke-opacity;
  fill: color-mix(in srgb, var(--toolbarbutton-icon-fill-attention) 20%, transparent);
  stroke: var(--toolbarbutton-icon-fill-attention);
  width: 20px;
  height: 20px;
  margin-block: auto;
  margin-inline: 3px 12px;
}

#editContactPanelTitle {
  font-size: 130%;
  font-weight: bold;
  margin-block: auto;
}

#editContactContent {
  margin-block: 6px 15px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

#editContactEmail {
  min-width: 20em;
}

html|input.editContactTextbox {
  appearance: none;
  cursor: text;
  color: var(--toolbar-field-color);
  background-color: var(--toolbar-field-background-color);
  border: 1px solid var(--toolbar-field-border-color);
  border-radius: var(--button-border-radius);
  padding: 3px 8px;
  width: 20em;
}

html|input.editContactTextbox:focus {
  border-color: var(--focus-outline-color);
  outline: 1px solid var(--focus-outline-color);
}

html|input.editContactTextbox[readonly] {
  border-color: transparent !important;
  background-color: inherit !important;
  box-shadow: none;
  color: inherit;
  outline: none !important;
}

#contactMoveDisabledText {
  width: 20em;
}

#editContactAddressBookList {
  appearance: none;
  background-color: var(--arrowpanel-dimmed);
  background-image: none;
  border: 1px solid;
  border-color: var(--panel-separator-color) !important;
  box-shadow: none;
  color: inherit;
  -moz-context-properties: fill, stroke;
  fill: color-mix(in srgb, currentColor 20%, transparent);
  stroke: currentColor;
}

#editContactAddressBookList:not([disabled="true"],[open="true"]):hover {
  background-image: linear-gradient(var(--arrowpanel-dimmed),
                                    var(--arrowpanel-dimmed));
  background-color: var(--arrowpanel-dimmed);
}

#editContactAddressBookList[open="true"] {
  background-image: linear-gradient(var(--arrowpanel-dimmed-further),
                                    var(--arrowpanel-dimmed-further));
  box-shadow: 0 1px 0 hsla(210, 4%, 10%, .05) inset;
}

#spacesToolbarCustomizationPanel {
  margin-block-end: 0;
}

.popup-panel {
  margin-block: 0;
}

.popup-panel-body {
  padding: 9px 15px;
  min-width: 300px;
}

.popup-panel-body h3 {
  margin-block: 0 15px;
  font-size: 1.4em;
  font-weight: 500;
}

.popup-panel-options-grid {
  display: grid;
  margin-block: 6px 15px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
}

.popup-panel-options-grid input {
  margin-inline-end: 0;
}

.popup-panel-column-container {
  grid-column: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.popup-panel button:focus-visible,
.popup-panel input[type="color"]:focus-visible {
  outline: 2px solid var(--focus-outline-color);
  outline-offset: -1px;
}

.popup-panel label,
.popup-panel checkbox {
  margin-inline-start: 0;
}

.popup-panel label.indent,
.popup-panel checkbox.indent {
  margin-inline-start: 23px;
}

.popup-panel-buttons-container {
  display: flex;
  align-items: center;
  margin: 0;
  justify-content: end;
}

.popup-panel-buttons-container > button {
  appearance: none;
  border: 0;
  border-radius: 4px;
  color: var(--button-color, inherit);
  background-color: var(--button-background-color, color-mix(in srgb, currentColor 13%, transparent));
  padding: 8px 16px;
  font-weight: 600;
  min-width: 0;
  margin-inline: 8px 0;
  margin-bottom: 0;
}

@media (prefers-contrast) {
  .popup-panel-buttons-container > button {
    outline: 1px solid var(--button-border-color);
  }
}

.popup-panel-buttons-container > button[disabled] {
  opacity: 0.4;
}

.popup-panel-buttons-container > button:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.popup-panel-buttons-container > button:not([disabled]):hover {
  background-color: var(--button-hover-background-color, color-mix(in srgb, currentColor 17%, transparent));
  color: var(--button-hover-text-color);
}


.popup-panel-buttons-container > button:not([disabled]):hover:active {
  background-color: var(--button-active-background-color, color-mix(in srgb, currentColor 30%, transparent));
}

.popup-panel-buttons-container > button.primary:not([disabled]) {
  color: var(--button-primary-color);
  background-color: var(--button-primary-background-color);
}

.popup-panel-buttons-container > button.primary:not([disabled]):hover {
  background-color: var(--button-primary-hover-background-color);
}

.popup-panel-buttons-container > button.primary:not([disabled]):hover:active {
  background-color: var(--button-primary-active-background-color);
}

.checkbox-description {
  margin-inline-start: 23px;
  font-size: 0.95rem;
  opacity: 0.8;
  margin-block: -5px 6px;
}
