/* 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 https://mozilla.org/MPL/2.0/. */

@import url("chrome://global/skin/in-content/common.css");
@import url("chrome://browser/content/backup/backup-common.css");

#password-inputs-form {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-large);

  > #repeat-password-label {
    display: flex;
    flex-direction: column;
  }

  > #new-password-label input,
  > #repeat-password-label input {
    margin-inline-start: 0;
  }
}

#new-password-label {
  position: relative;

  #new-password-label-wrapper-span-input {
    display: flex;
    flex-direction: column;
  }
}

.hidden {
  visibility: hidden;
  transition: visibility 0.5s;
}

#password-rules {
  position: absolute;
  z-index: 10;

  /* Default, not zoomed in */
  @media (min-width: 1200px) {
    width: 20rem;
    inset-inline-start: 100%;
    transform: translate(-1rem, 1rem);

    &:dir(rtl) {
      transform: translate(1rem, 1rem);
    }
  }

  /* Zoomed in */
  @media (max-width: 1200px) {
    width: 23rem;
    /* Shift the tooltip under the password input by a few pixels */
    transform: translateY(calc(var(--input-text-min-height) + 1.75rem));
  }
}