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

#password-rules-wrapper[popover] {
  margin: 0;
  padding: var(--space-large) var(--space-xlarge);
  background-color: var(--background-color-box);
  border: var(--border-width) solid var(--border-color-interactive);
  border-radius: var(--border-radius-small);
  overflow: visible;

  ul {
    margin: 0;
    padding: 0;
    text-align: start;
  }

  li {
    list-style-image: url(chrome://global/skin/icons/check.svg);
    list-style-position: inside;
    -moz-context-properties: fill;
    fill: currentColor;

    &:last-child {
      margin-block-start: 0.5rem;
      margin-block-end: 0.5rem;
    }

    span {
      position: relative;
      top: -3px;
    }
  }

  .warning {
    -moz-context-properties: fill, stroke;
    color: var(--icon-color-critical);
    fill: var(--icon-color-critical);
    stroke: var(--icon-color-critical);
    list-style-image: url(chrome://global/skin/icons/warning.svg);
  }

  /* Arrow */
  &::before {
    width: 0.75rem;
    height: 0.75rem;
    position: absolute;
    content: "";
    background-color: var(--background-color-box);
    border-block-start: var(--border-width) solid var(--border-color-interactive);
    border-inline-start: var(--border-width) solid var(--border-color-interactive);
  }

  /* Default, not zoomed in */
  @media (min-width: 1200px) {
    &::before {
      inset-inline-start: -0.4rem;
      inset-block-start: 1.25rem;
      rotate: -45deg;
    }

    &:dir(rtl)::before {
      rotate: 45deg;
    }
  }

  /* Zoomed in */
  @media (max-width: 1200px) {
    &::before {
      inset-inline-start: 1.25rem;
      inset-block-start: -0.46rem;
      rotate: 45deg;
    }

    &:dir(rtl)::before {
      rotate: -45deg;
    }
  }
}

#password-rules-header {
  margin-block-start: 0;
  font-size: 14px;
  font-weight: var(--font-weight-heading);
}

.rule-description {
  font-size: 12px;
}

@media (min-width: 1200px) {
  :host([embedded-fx-backup-opt-in]) {
    #password-rules-wrapper {
      margin: 0.5rem -100px;
    }
  }
}