/* --- The address a User logs in with (shared/_user_email) ---
   Shown and never changed, so it is a readonly input with the Confirmed
   tick inside it, in line with the User Number's tick (user_number.css).

   Readonly rather than disabled keeps it in the tab order, and a tab stop
   must show it has focus: application.css's input[readonly] drops the ring
   (written for the Business Details facts, which nothing tabs to), so this
   puts it back here. */

.user-email {
  .user-email-box {
    position: relative;
  }

  input[readonly] {
    padding-right: 2.5rem;

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
      border-color: var(--color-accent);
    }
  }

  .user-email-tick {
    position: absolute;
    top: 50%;
    right: 0.7rem;
    transform: translateY(-50%);
  }
}