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

/**
 * "address-capture" prefix is used for cases where the style should apply
 * to "save address doorhanger", "update address doorhanger", and "edit address doorhanger"
 *
 * "address-save" prefix is used for "save address doorhanger"
 * "address-update" prefix is used for "update address doorhanger"
 * "address-edit" prefix is used for "edit address doorhanger"
 * "address-save-update" prefix is used for "save address doorhanger" and "update address doorhanger"
 */

.popup-notification-body[popupid="address-save-update"],
.popup-notification-body[popupid="address-edit"] {
  width: 25.8em;
}

.address-capture-notification {
  /* Overwrite margin that we don't need */
  :is(popupnotificationcontent, .panel-footer) {
    margin-top: 0;
  }

  description {
    margin: 0;
  }

  .popup-notification-body-container {
    padding-block: 0;
  }

  /* define the default text format for the address capture doorhanger */
  p {
    margin-block: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  #address-capture-menu-button {
    margin-inline-start: auto;

    &:hover {
      color: var(--button-text-color-ghost-hover);
      background-color: var(--button-background-color-ghost-hover);

      &:active {
        color: var(--button-text-color-ghost-active);
        background-color: var(--button-background-color-ghost-active);
      }
    }

    &:focus-visible {
      outline: var(--focus-outline);
      outline-offset: var(--focus-outline-offset);
      border-radius: var(--border-radius-xsmall);
    }

    &#address-capture-edit-address-button {
      background-image: url("chrome://global/skin/icons/edit-outline.svg");
    }

    &#address-capture-menu-button {
      background-image: url("chrome://browser/skin/formautofill/icon-doorhanger-menu.svg");
    }
  }
}

.address-capture-header {
  margin-top: var(--space-large);
  margin-bottom: var(--space-medium);
  display: flex;
  flex-direction: row;

  > h1 {
    font-size: 1em;
    padding-block: 8px 4px;
    margin-block: 0;
  }
}

.address-save-update-notification-content > .address-capture-content {
  display: flex;
  flex-direction: column;
}

.address-capture-description,
.address-save-update-row-container,
.address-edit-row-container {
  margin-bottom: var(--space-large);
}

.address-save-update-row-container {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;

  > image {
    width: var(--icon-size-small);
    height: var(--icon-size-small);
    margin-top: 2px;
  }

  &:first-child p:not(:first-child) {
    color: var(--text-color-deemphasized);
  }
}

.address-capture-edit-link-container {
  /* Cancel the preceding section's margin-bottom so the link sits flush. */
  margin-top: calc(-1 * var(--space-large));
  /* Align with second column of .address-save-update-row-container (icon + gap). */
  padding-inline-start: calc(var(--icon-size-small) + var(--space-small));
}

.address-update-text-diff-added,
.address-update-text-diff-removed {
  font-weight: var(--font-weight-semibold);
  color: light-dark(rgba(2, 80, 187, 1), rgba(128, 235, 255, 1));
  background: light-dark(rgba(0, 96, 223, 0.08), rgba(0, 221, 255, 0.14));
}

.address-update-text-diff-removed {
  text-decoration: line-through;
}

.address-capture-img-address {
  list-style-image: url("chrome://browser/skin/formautofill/icon-capture-address-fields.svg");
}

.address-capture-img-email {
  list-style-image: url("chrome://browser/skin/formautofill/icon-capture-email-fields.svg");
}

.address-edit-row-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.address-edit-notification-content :is(moz-input-text, moz-textarea, moz-select) {
  flex: 1;
}

.credit-card-capture-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
}

.cc-icon {
  height: var(--icon-size-small);
  margin-inline-end: var(--space-small);
}

.payments-doorhanger-description {
  display: flex;
  flex-direction: column;
  gap: var(--space-xsmall);

  > .line-two {
    color: var(--text-color-deemphasized);
  }
}