/* -------------------------------- 

File#: _2_password-strength
Title: Password Strength Indicator
Descr: Password requirements and strength indicator
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* {
  font: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: hsl(0, 0%, 100%);
  font-family: system-ui, sans-serif;
  color: hsl(230, 7%, 23%);
  font-size: 1rem;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: hsl(230, 13%, 9%);
  font-weight: 700;
}

h1 {
  font-size: 2.0736rem;
}

h2 {
  font-size: 1.728rem;
}

h3 {
  font-size: 1.25rem;
}

h4 {
  font-size: 1.2rem;
}

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}



table {
  border-collapse: collapse;
  border-spacing: 0;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --pn9-color-primary-hsl: 250, 84%, 54%;
  --pn9-color-bg-hsl: 0, 0%, 100%;
  --pn9-color-contrast-high-hsl: 230, 7%, 23%;
  --pn9-color-contrast-higher-hsl: 230, 13%, 9%;
  --pn9-color-success-darker-hsl: 212, 48%, 49%;
  --pn9-color-success-hsl: 212, 48%, 49%;
  --pn9-color-warning-hsl: 35, 79%, 66%;
  --pn9-color-error-hsl: 342, 89%, 48%;
  --pn9-color-contrast-lower-hsl: 240, 4%, 85%;
  --pn9-color-contrast-medium-hsl: 225, 4%, 47%;
  --pn9-color-bg-dark-hsl: 240, 4%, 95%;
  --pn9-color-contrast-low-hsl: 240, 4%, 65%;

  /* spacing */
  --pn9-space-4xs: 0.125rem;
  --pn9-space-2xs: 0.375rem;
  --pn9-space-xs: 0.5rem;

  /* typography */
  --pn9-text-sm: 0.833rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --pn9-space-4xs: 0.1875rem;
    --pn9-space-2xs: 0.5625rem;
    --pn9-space-xs: 0.75rem;

    /* typography */
    --pn9-text-sm: 1rem;
  }
}

/* form elements */
.pn9-form-control {
    width: 50%;
    background-color: white;
    border: 1px solid #d6d6d6;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border-radius: 0.25em;
}

.pn9-form-control::placeholder {
  opacity: 1;
  color: hsl(var(--pn9-color-contrast-low-hsl));
}

.pn9-form-control:focus, .pn9-form-control:focus-within {
   border: 1px solid #93aaf7;
}

.pn9-form-label {
  display: inline-block;
  font-size: var(--pn9-text-sm);
}

/* icons */
.pn9-icon {
  height: var(--pn9-size, 1em);
  width: var(--pn9-size, 1em);
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

/* component */
:root {
  --password-strength-meter-height: 8px;
  --password-strength-meter-radius: 50em;
  --password-strength-icon-size: 16px;
  --password-strength-icon-margin-right: 4px;
  --password-strength-icon-stroke-width: 2px;
}

.password-strength__req {
  line-height: 1.2;
  margin-bottom: var(--pn9-space-4xs);
  display: flex;
  align-items: center;
}
.password-strength__req .pn9-icon {
  font-size: var(--password-strength-icon-size);
  margin-right: var(--password-strength-icon-margin-right);
}

.password-strength__icon-group {
  stroke-width: var(--password-strength-icon-stroke-width);
}
.password-strength__icon-group * {
  transition: stroke-dashoffset 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), stroke-dashoffset 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), stroke-dashoffset 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), -webkit-transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-transform-origin: 8px 8px;
          transform-origin: 8px 8px;
  stroke-dasharray: 16;
}
.password-strength__icon-group *:first-child {
  stroke-dashoffset: 24;
}
.password-strength__icon-group *:last-child {
  stroke-dashoffset: 10;
}

.password-strength__req--met {
  color: hsl(var(--pn9-color-success-darker-hsl));
  transition: color 0.3s;
}
.password-strength__req--met .password-strength__icon-group *:first-child {
  stroke-dashoffset: 23;
  -webkit-transform: translateX(-2px) translateY(4px) rotate(45deg);
          transform: translateX(-2px) translateY(4px) rotate(45deg);
}
.password-strength__req--met .password-strength__icon-group *:last-child {
  stroke-dashoffset: 5;
  -webkit-transform: translateX(-2px) translateY(4px) rotate(-45deg);
          transform: translateX(-2px) translateY(4px) rotate(-45deg);
}

.password-strength__req--no-met {
  color: hsl(var(--pn9-color-error-hsl));
}
.password-strength__req--no-met .password-strength__icon-group *:first-child {
  stroke-dashoffset: 32;
  -webkit-transform: translateX(5px) translateY(5px) rotate(45deg);
          transform: translateX(5px) translateY(5px) rotate(45deg);
}
.password-strength__req--no-met .password-strength__icon-group *:last-child {
  stroke-dashoffset: 2;
  -webkit-transform: translateX(-5px) translateY(5px) rotate(-45deg);
          transform: translateX(-5px) translateY(5px) rotate(-45deg);
}

.password-strength__meter {
  height: var(--password-strength-meter-height);
  border-radius: var(--password-strength-meter-radius);
  overflow: hidden;
}
.password-strength__meter * {
  will-change: width;
  transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0.3s;
}

.password-strength__meter--fill-1 * {
  background-color: hsl(var(--pn9-color-error-hsl));
}

.password-strength__meter--fill-2 * {
  background-color: hsl(var(--pn9-color-warning-hsl));
}

.password-strength__meter--fill-3 * {
  background-color: hsl(var(--pn9-color-success-hsl));
}

.password-strength__meter--fill-4 * {
  background-color: hsl(var(--pn9-color-success-hsl));
}

/* utility classes */
.pn9-color-contrast-high {
  --pn9-color-o: 1;
  color: hsla(var(--pn9-color-contrast-high-hsl), var(--pn9-color-o, 1));
}

.pn9-color-contrast-medium {
  --pn9-color-o: 1;
  color: hsla(var(--pn9-color-contrast-medium-hsl), var(--pn9-color-o, 1));
}

.pn9-height-100\% {
  height: 100%;
}

.pn9-block {
  display: block;
}

.pn9-bg-contrast-lower {
  --pn9-bg-o: 1;
  background-color: hsla(var(--pn9-color-contrast-lower-hsl), var(--pn9-bg-o, 1));
}

.pn9-items-center {
  align-items: center;
}

.pn9-text-sm {
  font-size: var(--text-size-95);
}

.pn9-gap-2xs {
  gap: var(--pn9-space-2xs);
}

.pn9-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.pn9-grid > * {
  min-width: 0;
  grid-column-end: span 12;
}

.pn9-margin-top-2xs {
  margin-top: var(--pn9-space-2xs);
}

.pn9-flex-center {
  justify-content: center;
  align-items: center;
}

.pn9-flex {
  display: flex;
}

.pn9-width-100\% {
  width: 100%;
}

.pn9-margin-bottom-2xs {
  margin-bottom: var(--pn9-space-2xs);
}

.pn9-sr-only {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.pn9-flex-column-reverse {
  flex-direction: column-reverse;
}

.pn9-hide {
  display: none !important;
}

@media(min-width: 32rem){
  .pn9-text-right\@xs {
    text-align: right;
  }

  .pn9-col-6\@xs {
    grid-column-end: span 6;
  }
}