/*
  Show/hide toggle for the .rg auth pages.

  This lives in its own file on purpose: every other theme/css/*.css here is a
  byte-for-byte copy of the reference site's stylesheet, and that identity is
  what lets any live-vs-reference difference be blamed on the markup. The
  reference has no password field anywhere (no `type="password"` in the whole
  export), so there is nothing in reg.css to extend — this is an addition, and
  it stays outside reg.css so that file can keep being diffed against source.

  Units follow reg.css: vw off a 1920 base, and off 440 under the same 767px
  breakpoint it uses.
*/

.rg__pw {
  position: relative;
}

/* room for the button so a long password never runs under the icon */
.rg__pw input {
  padding-right: 3.646vw;
}

.rg__eye {
  position: absolute;
  top: 0;
  right: 1.042vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.771vw;
  height: 3.385vw;
  padding: 0;
  background: none;
  border: 0;
  color: #000;
  cursor: pointer;
}

.rg__eye svg {
  display: block;
  width: 1.25vw;
  height: 1.25vw;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* one icon at a time: eye while hidden, struck-through eye while shown */
.rg__eye .rg__eye__off,
.rg__eye.is-shown .rg__eye__on {
  display: none;
}

.rg__eye.is-shown .rg__eye__off {
  display: block;
}

@media (max-width: 767px) {
  .rg__pw input {
    padding-right: 13.636vw;
  }

  .rg__eye {
    right: 4.545vw;
    width: 5.455vw;
    height: 11.064vw;
  }

  .rg__eye svg {
    width: 5.455vw;
    height: 5.455vw;
  }
}