/* Passkey UI shared by all areas. Deliberately small: inherits fonts and colours from each area's
   own stylesheet, only adds layout for the elements passkey.js renders. */

.passkey-login {
    margin-top: 1rem;
}

.passkey-login__divider {
    margin: 1rem 0 .5rem;
}

[data-passkey-message] {
    margin-top: .5rem;
}

.passkey-message--error {
    color: #b00020;
}

/* Separates the section from whatever «Min side» shows above it. Intranett's .user-details sets its own
   margins with a more specific selector, so this does not apply there. */
.passkey-manager {
    margin-top: 2.5rem;
}

.passkey-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.passkey-list__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .75rem;
    padding: .5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .15);
}

.passkey-list__details {
    font-size: .9em;
    opacity: .8;
}

.passkey-add {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.passkey-link {
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
    color: inherit;
}

[data-passkey-login] {
    white-space: nowrap;
}