/* 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;
}

.editAddressForm .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%;
  }

  input,
  textarea,
  select {
    width: 100%;
    margin: 0;
  }
}

#country-container {
  /* The country dropdown has a different intrinsic (content) width than the
     other fields which are <input>. */
  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));
}

#street-address {
  resize: vertical;
}

#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;
}

moz-button-group {
  margin-inline: 4px;
  margin-block-end: 4px;
}
