.password-input {
    position: relative;
    display: block;
    width: 100%;
}

.field .password-input input {
    padding-right: 58px;
}

.password-input .password-toggle {
    position: absolute;
    z-index: 2;
    top: 1px;
    right: 1px;
    display: grid;
    width: 47px;
    height: 45px;
    place-items: center;
    border: 0;
    border-left: 1px solid var(--line, #ddd7cf);
    border-radius: 0 10px 10px 0;
    background: var(--surface, #fffdfa);
    color: var(--teal-600, #315f83);
    cursor: pointer;
    transform: none;
    transition: background-color 150ms ease, color 150ms ease;
}

.password-input .password-toggle:hover,
.password-input .password-toggle:focus-visible {
    background: var(--teal-100, #e8f0f6);
    color: var(--teal-700, #244e6d);
    outline: 0;
}

.password-input .password-toggle:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(49, 95, 131, 0.35);
}

.password-toggle__icon {
    width: 20px;
    height: 20px;
}

.password-toggle__icon--hide,
.password-toggle[aria-pressed="true"] .password-toggle__icon--show {
    display: none;
}

.password-toggle[aria-pressed="true"] .password-toggle__icon--hide {
    display: block;
}