/* Стили для примера */
   .h-user-info { margin: 20px; }
   .input-password-hide { cursor: pointer; }
   .hidden { display: none; } /* Скрывает элемент */

  /* Добавляем стили для видимого состояния светлой и темной иконок */
  .theme-switch__icon--light {
    display: block;
  }

  .theme-switch__icon--dark {
    display: none;
  }

  /* Для темной темы иконки можно переключать с помощью этого стиля */
  [data-dark] .theme-switch__icon--light {
    display: none;
  }

  [data-dark] .theme-switch__icon--dark {
    display: block;
  }

  /* Стиль для скрытой панели */
  .h-user-panel {
    visibility: hidden; /* Панель невидима по умолчанию */
    opacity: 0;
    position: absolute; /* Чтобы элемент не занимал место в потоке */
    transition: visibility 0s, opacity 0.3s ease-in-out;
  }

  /* Стиль для активной (видимой) панели */
  .h-user-panel.h-user-panel--active {
    visibility: visible;
    opacity: 1;
    position: relative; /* Возвращаем в поток при активации */
  }