/**
 * @file
 * Styles dla przycisków podglądu hasła.
 */

/* Wrapper pola hasła musi mieć pozycję względną dla prawidłowego pozycjonowania przycisku */
.js-form-type-password {
  position: relative;
}

/* Stylowanie przycisku podglądu hasła */
.password-toggle-button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  padding: 5px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
}

/* Efekty hover i focus dla przycisku */
.password-toggle-button:hover,
.password-toggle-button:focus {
  color: #0e1b77;
  outline: none;
}

/* Efekt aktywności przycisku */
.password-toggle-button:active {
  transform: translateY(-50%) scale(0.95);
}

/* Stylowanie ikon SVG wewnątrz przycisku */
.password-toggle-button svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

/* Animacja ikony przy najechaniu */
.password-toggle-button:hover svg {
  transform: scale(1.1);
}

/* Dodajemy padding dla pola hasła, aby przycisk nie nachodzi na tekst */
.js-form-type-password input[type="password"],
.js-form-type-password input[type="text"] {
  padding-right: 40px !important;
}



/* Dodatkowe style dla przycisków podglądu hasła w formularzu rejestracji */
#edit-password .password-toggle-button {
  z-index: 15;
}

/* Dostosowania dla formularza w motywie Bootstrap */
.password-strength {
  margin-top: 10px;
  position: relative;
  z-index: 5;
}

/* Zapewnienie, że wskaźnik siły hasła jest nad przyciskiem podglądu */
.password-strength__meter,
.password-strength__title,
.password-confirm-message {
  position: relative;
  z-index: 5;
}

/* Poprawki dla motywu Bootstrap */
@media (max-width: 768px) {
  .password-toggle-button {
    right: 5px;
    padding: 3px;
  }

  .password-toggle-button svg {
    width: 18px;
    height: 18px;
  }
}