.login-dialog-or {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "lineleft text lineright";

    align-items: center;

    opacity: 0.6;
    margin-top: 20px;
    margin-bottom: 20px;

    padding-left: 10px;
    padding-right: 10px;

    .login-dialog-or-lineleft { grid-area: lineleft; }
    .login-dialog-or-text { grid-area: text; margin-left: 8px; margin-right: 8px; }
    .login-dialog-or-lineright { grid-area: lineright; }

    .login-dialog-or-lineleft,
    .login-dialog-or-lineright { 
        height: 1px;
        border-top: 1px solid currentColor;
    }
}

.login-dialog-passkey {
    .login-dialog-passkey-button {
        display: flex;
        flex-direction: row;
        margin-left: auto;
        margin-right: auto;

        background-color: var(--brandcolor-accent);
        color: var(--brandcolor-accent-bwcontrast);
        padding-left: 4rem;
        padding-right: 4rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-radius: 0.5rem;
        font-size: 1.25rem;

        .login-dialog-passkey-button-icon {
            display: inline-block;

            width: 1.25em;
            height: 1.25em;
            margin-right: 7px;

            & svg {
                width: 1.25em;
                height: 1.25em;
            }
        }
    }
}