/**
 * 이 파일은 OAuth모듈의 일부입니다. (https://www.imodules.io)
 *
 * OAuth모듈 스타일을 정의한다.
 *
 * @file /modules/oauth/resources/styles/Oauth.css
 * @author Arzz <arzz@arzz.com>
 * @license MIT License
 * @modified 2026. 7. 9.
 */
div[data-module='oauth'] {
    &[data-role='buttons'] {
        display: flex;
        flex-direction: column;
        width: 100%;

        > a[data-role='button'] {
            display: flex;
            align-items: center;
            padding: 10px;
            border-radius: 5px;
            color: var(--im-color-accent-backward-600);
            height: 45px;
            gap: 10px;

            > i.site {
                display: inline-block;
                font-style: normal;
                font-family: moimz;
                text-rendering: auto;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            &[data-social='google'] {
                background: #da483f;

                > i.site::before {
                    content: '\eb01';
                }
            }

            &[data-social='slack'] {
                background: #4a154b;

                > i.site::before {
                    content: '\eb24';
                }
            }
        }

        > a[data-role='button'] + a[data-role='button'] {
            margin-top: 10px;
        }
    }

    div[data-role='module'][data-module='member'] {
        section {
            > ul[data-role='form'] {
                &.social {
                    > li {
                        > div {
                            > a[data-role='button'],
                            > button[data-role='button'] {
                                color: var(--im-color-accent-backward-600);

                                > i:not(&.site) {
                                    font-size: 14px;
                                }

                                > i.site {
                                    display: inline-block;
                                    font-style: normal;
                                    font-family: moimz;
                                    text-rendering: auto;
                                    -webkit-font-smoothing: antialiased;
                                    -moz-osx-font-smoothing: grayscale;
                                }

                                &[data-social='google'] {
                                    background: #da483f;

                                    > i.site::before {
                                        content: '\eb01';
                                    }
                                }

                                &[data-social='slack'] {
                                    background: #4a154b;

                                    > i.site::before {
                                        content: '\eb24';
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}