.auth-oauth {
    display: grid;
    gap: 1rem;
}

.auth-oauth__divider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
}

.auth-oauth__divider::before,
.auth-oauth__divider::after {
    height: 1px;
    background: var(--color-border);
    content: "";
}

.auth-oauth__button {
    appearance: none;
    display: inline-flex;
    width: 100%;
    min-height: var(--touch-target);
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.7rem 1rem;
    border: 1px solid #dadce0;
    border-radius: var(--radius-sm);
    color: #3c4043;
    background: #fff;
    box-shadow: 0 1px 2px rgb(60 64 67 / 8%);
    cursor: pointer;
    font-weight: 750;
    text-decoration: none;
}

.auth-oauth__button .fa-google {
    color: #4285f4;
    background: conic-gradient(
        from -35deg,
        #4285f4 0deg 105deg,
        #34a853 105deg 190deg,
        #fbbc05 190deg 255deg,
        #ea4335 255deg 315deg,
        #4285f4 315deg 360deg
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.auth-oauth__button:hover {
    border-color: #a8c7fa;
    color: #202124;
    background: #f8faff;
}

.auth-oauth__button:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.auth-oauth__button:active {
    background: #eef3fe;
}

.auth-oauth__button:disabled,
.auth-oauth__button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.65;
}

.auth-flow__footer.auth-flow__footer--inline {
    display: flex;
    justify-content: flex-start;
    gap: 0.35rem;
    text-align: left;
}

.login-register.login-register--inline {
    display: flex;
    justify-content: flex-start;
    gap: 0.35rem;
    text-align: left;
}

.login-register.login-register--inline a {
    justify-self: auto;
    justify-content: flex-start;
}