.secret-field {
    display: grid;
    width: 100%;
    min-width: 0;
}
.secret-field > input {
    grid-area: 1 / 1;
    min-width: 0;
    padding-inline-end: calc(var(--button-height) + 12px);
}
.secret-field > .secret-toggle {
    grid-area: 1 / 1;
    align-self: center;
    justify-self: end;
    margin-inline-end: 2px;
    z-index: 1;
}
html body button.secret-toggle {
    border: 0;
    background: transparent;
}
html body button.secret-toggle:hover {
    background: var(--hover);
}
html body button.secret-toggle:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}
@media (pointer: coarse) {
    .secret-field > input {
        min-height: var(--touch-target);
        padding-inline-end: calc(var(--touch-target) + 12px);
    }
}