/* input-password.css
   Consumers: site/preview/input-password.html
   Tokens: site/tokens.css
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Eye toggle button ──────────────────────────────────────────────────── */

.ds-input-eye-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  padding:         0;
  border:          none;
  background:      transparent;
  color:           var(--ds-icon-tertiary);
  cursor:          pointer;
  border-radius:   var(--ds-field-icon-btn-radius);
  transition:      color var(--ds-dur-1) var(--ds-ease), background var(--ds-dur-1) var(--ds-ease);
}

.ds-input-eye-btn:hover  { background: var(--ds-field-icon-btn-hover-bg); }
.ds-input-eye-btn:active { color: var(--ds-field-icon-btn-active-color); background: var(--ds-field-icon-btn-active-bg); }
.ds-input-eye-btn svg    { display: block; }
.ds-input-eye-btn svg    { display: block; }

/* ── LabelIn: eye button alignment inside .field-in ────────────────────── */

.field-in .ds-input-eye-btn {
  margin-left: var(--ds-field-in-sm-px, 12px);
  flex-shrink: 0;
}
.field-in[data-size='lg'] .ds-input-eye-btn,
.field-in[data-size='xl'] .ds-input-eye-btn {
  margin-left: var(--ds-field-in-lg-px, 16px);
}

/* ── Password group wrapper ─────────────────────────────────────────────── */

.ds-input-password-group {
  display:        flex;
  flex-direction: column;
  width:          100%;
}
.ds-input-password-group .ds-pb { margin-top: 8px; }

/* ── Conditions list ────────────────────────────────────────────────────── */

.ds-input-conditions {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            8px;
  padding:        8px 0 0;
  margin:         0;
}

.ds-input-condition {
  display:     flex;
  align-items: flex-start;
  gap:         4px;
  font-family: inherit;
  font-size:   var(--ds-field-caption-fs);
  line-height: var(--ds-field-caption-lh);
  color:       var(--ds-text-secondary);
}

.ds-input-condition-icon {
  flex-shrink:     0;
  width:           16px;
  height:          16px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--ds-icon-tertiary);
  margin-top:      1px;
}
.ds-input-condition[data-met] .ds-input-condition-icon { color: var(--ds-pos-default); }

/* ── Recommendations ────────────────────────────────────────────────────── */

.ds-input-recommendations {
  margin:      8px 0 0;
  font-family: inherit;
  font-size:   var(--ds-field-caption-fs);
  line-height: var(--ds-field-caption-lh);
  color:       var(--ds-text-secondary);
}