/**
 * @file
 * Password visibility toggle styles for login form.
 */

/* Password field wrapper with toggle button */
.password-field-wrapper {
  position: relative;
}

.password-field-wrapper .form-item {
  margin-bottom: 0;
}

/* Ensure password input has padding for the toggle button */
.password-field-wrapper input[type="password"],
.password-field-wrapper input[type="text"] {
  padding-right: 48px;
}

/* Eye icon toggle button - positioned inside the input */
.password-toggle-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: color 0.2s;
}

/* Account for label height in login form */
.password-field-wrapper .form-item + .password-toggle-btn {
  top: calc(50% + 12px);
}

.password-toggle-btn:hover {
  color: #333;
}

.password-toggle-btn:focus {
  outline: 2px solid #2F99C9;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Eye icon (hidden state - password is hidden, show "view" icon) */
.password-toggle-btn::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Eye-off icon (visible state - password is shown, show "hide" icon) */
.password-toggle-btn.is-visible::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21'/%3E%3C/svg%3E");
}