/* 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 {
  margin: 0;
  position: absolute;
  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;
  z-index: 10;

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: flex;
    align-items: start;
    gap: 0.5rem;

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

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

.icon {
  -moz-context-properties: fill, stroke;
  fill: currentColor;
  stroke: currentColor;
}

.success {
  color: var(--icon-color-success);
}

.warning {
  color: var(--icon-color-warning);
}