:is(.password-field, .attendance-password-field) {
  position: relative;
}

:is(.password-field, .attendance-password-field) input {
  width: 100%;
  padding-right: 54px !important;
}

:is(.password-toggle, .attendance-password-toggle) {
  position: absolute !important;
  top: 50% !important;
  right: 5px !important;
  z-index: 2;
  width: 42px !important;
  min-width: 42px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  color: var(--attendance-navy, #102c40) !important;
  border: 0 !important;
  border-radius: 4px;
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-50%);
}

:is(.password-toggle, .attendance-password-toggle):hover,
:is(.password-toggle, .attendance-password-toggle):focus-visible {
  background: rgba(16, 44, 64, .08) !important;
  outline: none;
}

:is(.password-toggle, .attendance-password-toggle) svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:is(.password-toggle, .attendance-password-toggle)::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 2px;
  background: currentColor;
  transform: rotate(-42deg) scaleX(0);
  transition: transform .16s ease;
}

:is(.password-toggle, .attendance-password-toggle).is-visible::after {
  transform: rotate(-42deg) scaleX(1);
}