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

.editAddressForm {
  display: flex;
  flex-wrap: wrap;
  /* Use space-between so --grid-column-row-gap is in between the elements on a row */
  justify-content: space-between;

  .container {
    /* !important is needed to override preferences.css's generic label rule. */
    margin-top: var(--grid-column-row-gap) !important;
    margin-inline: calc(var(--grid-column-row-gap) / 2);
    flex-grow: 1;

    &.new-line {
      flex: 0 1 100%;
    }

    moz-input-text,
    moz-textarea,
    moz-select {
      width: 100%;
    }
  }

  #address-level2-container,
  #email-container {
    flex: 0 1 100%;
  }

  #country-container {
    /* The country dropdown has a different intrinsic (content) width than the
       other fields which are moz-input-text. */
    flex-basis: calc(50% - var(--grid-column-row-gap));
    flex-grow: 0;
    /* Country names can be longer than 50% which ruins the symmetry in the grid. */
    max-width: calc(50% - var(--grid-column-row-gap));
  }
}

#country-warning-message {
  box-sizing: border-box;
  font-size: 1rem;
  display: flex;
  align-items: center;
  text-align: start;
  opacity: 0.5;
  padding-inline-start: 1em;
  flex: 1;
}