/*
 * Przycisk podglądu hasła. Markup dokłada `assets/js/haslo.js`, ten arkusz tylko go ustawia.
 *
 * Otulina jest `block`, a nie `inline-block`: pola hasła stoją w kolumnach formularza zapisu
 * i muszą zajmować całą szerokość komórki, tak jak zajmowały przed owinięciem.
 */

.fa-haslo {
	position: relative;
	display: block;
	width: 100%;
}

/* Miejsce na przycisk. Bez tego długie hasło wchodzi pod ikonę. */
.fa-haslo input {
	width: 100%;
	padding-right: 44px;
}

.fa-haslo__btn {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	padding: 0;
	color: var(--fa-text-muted, #737a82);
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.fa-haslo__btn svg {
	width: 20px;
	height: 20px;
}

.fa-haslo__btn:hover {
	color: var(--fa-orange-300, #ffb05c);
}

/* Obrys wewnątrz pola, żeby nie wychodził poza jego ramkę i nie mylił się z focusem
   samego pola — kolor i grubość jak w pozostałych stanach focus w projekcie. */
.fa-haslo__btn:focus-visible {
	outline: 2px solid var(--fa-orange-500, #fd8202);
	outline-offset: -3px;
}

/* Wciśnięty stan czytamy z `aria-pressed`, więc jeden atrybut niesie i znaczenie
   dla czytnika ekranu, i wygląd. */
.fa-haslo__btn[aria-pressed="true"] {
	color: var(--fa-orange-500, #fd8202);
}