body.converse-embedded > main {
    /* converse-embedded class injected by converse.js at runtime */
    padding: 0;
}

converse-root#conversejs {

    /* variables from converse */
    --primary-color: $color_highlight_inactive;
    --primary-color-dark: $color_highlight_active;
    --link-color: $color_highlight_active;
    --link-hover-color: $color_highlight;
    --controlbox-pane-background-color: transparent;
    --controlbox-head-color: transparent;
    --chat-head-color: $color_bg_text;
    --chat-textarea-background-color: transparent;
    --chat-content-background-color: transparent;
    --text-color: $color_font_main;
    --highlight-color: $color_highlight;
    --controlbox-pane-bg-hover-color: $color_bg_text;
    /* custom introduced variables */
    --text-info-color: darken($color_font_main, 10%);
    --dialogue-background-color: $color_bg_text;
    --dialogue-background: var(\--dialogue-background-color);
    --dropdown-item-background-color: $color_bg_main;
    --dropdown-item-background: var(\--dropdown-item-background-color);

    /* override some of our other css so it doesn't mess with converse */
    button::after {
        display: none;
    }

    * {
        border-radius: 0 !important; /* moar. blocky. */
    }

    .box-flyout {
        position: relative;
    }

    converse-dragresize {
        display: none;
    }

    .form-control {
        background: $color_bg_text;
        border-radius: 0;
    }

    .chatbox {
        width: 100%;

        .chat-body {
            overflow-y: hidden;
        }

        converse-chat-toolbar {
            background: transparentize($color_bg_text, 50%);
        }
    }

    .message.chat-info {
        color: var(\--text-info-color);
    }

    .message.date-separator .separator-text {
        background: $color_bg_text;
        color: $color_font_main;
    }

    .sendXMPPMessage {
        background: var(\--chat-textarea-background-color);
    }

    converse-chat-toolbar .fa svg {
        fill: var(\--text-color);
    }

    /* Modals, dialogues and other floating boxes */
    .modal-content,
    .dropdown-menu {
        background: var(\--dialogue-background);
        box-shadow: 0 0 2px $color_highlight;
        border: 0.25rem solid transparentize($color_bg_contrast, 90%);
    }

    .close {
        color: $color_highlight_inactive;

        &:hover {
            color: $color_highlight_active;
        }

        &:active {
            color: $color_highlight;
        }
    }

    .dropdown-item {
        &:hover {
            background: var(\--dropdown-item-background);
        }
    }

    .items-list {
        .list-item {
            .list-item-action {
                width: auto;

                &::before {
                    padding: 0.25rem;
                }

                &:hover {
                    background: $color_bg_contrast;
                    color: $color_font_contrast;
                }
            }
        }
    }
}