@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins';

.conversejs {
    #controlbox {
        converse-login-form {
            .converse-fullscreen & {
                background-color: rgba(var(--background-color-rgb), 0.9);
            }
            .btn {
                color: var(--button-text-color);
            }
            .login-anon {
                height: auto;
                white-space: normal;
            }
            .conn-feedback {
                text-align: center;
                width: 100%;
            }
            .login-trusted {
                .form-check-input {
                    margin-top: 0.35em;
                }
            }
            flex-direction: row;
            padding-bottom: 0;
            padding-top: 0;

        }

        .toggle-register-login {
            font-weight: bold;
        }

        .controlbox-pane {
            .switch-form {
                color: var(--subdued-color);
                text-align: center;
                padding: 2em 0;
            }
        }
    }
}

.conversejs {
    converse-chats {
        &.converse-overlayed {
            #controlbox {
                converse-login-form {
                    fieldset {
                        margin-bottom: 0.5em;
                    }
                }

                converse-brand-logo {
                    padding-bottom: 1em;
                }

                .login-trusted {
                    white-space: nowrap;
                    font-size: 90%;
                    margin: 1em 0;
                }

                #converse-login-trusted {
                    margin-top: 0.5em;
                }

                converse-registration-form,
                converse-login-form {
                    @include make-col(12);
                    padding-top: 0;
                    padding-bottom: 0;
                }

                #converse-register {
                    .button-cancel {
                        font-size: 90%;
                    }
                }
            }
        }

        &.converse-embedded,
        &.converse-fullscreen {
            #controlbox {
                .toggle-register-login {
                    line-height: var(--line-height-huge);
                }

                converse-brand-logo {
                    padding-bottom: 1em;
                    @include media-breakpoint-up(md) {
                        padding-bottom: 2em;
                    }
                    @include media-breakpoint-up(xl) {
                        padding-bottom: 5em;
                    }
                }

                converse-footer {
                    display: none;
                    @include media-breakpoint-up(sm) {
                        display: block;
                    }
                    z-index: 100;
                    font-size: 100%;
                    text-align: center;
                    font-size: 90%;
                    background-color: rgba(var(--background-color-rgb), 0.9);
                }

                converse-login-form {
                    display: block;
                }

                converse-registration-form,
                converse-login-form {
                    margin: auto;
                    @include media-breakpoint-up(xs) {
                        padding: 1em 1em;
                    }
                    @include media-breakpoint-up(sm) {
                        padding: 3em 2em 3em;
                    }
                    @include make-col-ready();
                    @include make-col(8);

                    @include media-breakpoint-up(sm) {
                        @include make-col(8);
                    }
                    @include media-breakpoint-up(md) {
                        @include make-col(8);
                    }
                    @include media-breakpoint-up(lg) {
                        @include make-col(4);
                    }
                    @include media-breakpoint-up(xl) {
                        @include make-col(4);
                    }
                    .title,
                    .instructions {
                        margin: 0.5em 0;
                    }
                    input[type='submit'],
                    input[type='button'] {
                        width: auto;
                    }
                }
            }
        }
    }
}