// Styles reset for themed templates
.dwpp_widget {
    &, * {
        @include reset-tag-styles();
    }
}


// General styles
div.dwpp_widget {
    border-radius: $big-border-radius;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    @include paragraph-text-styles();

    .dwpp_widget__header {
        background-color: $accent-color;
        color: $accent-bg-color;
        padding: $vertical-grid-space $horizontal-grid-space;
        display: flex;
        align-items: center;

        .dwpp_widget__logo {
            margin-right: $side-spacer;
            height: 34px;
        }

        .dwpp_widget__title {
            @extend .dwpp_widget__caps;
            color: inherit;
        }
    }

    .dwpp_widget__body {
        background-size: 200px 180px, 110px 130px;
        background-position: 0 100%, 100% 100%;
        background-repeat: no-repeat, no-repeat;
        padding: $vertical-grid-space $horizontal-grid-space;

        & > *:first-child {
            margin-top: 0;
        }

        & > *:last-child {
            margin-bottom: 0;
        }
    }

    .dwpp_widget__footer {
        padding: $small-vertical-grid-space $small-vertical-grid-space $small-vertical-grid-space $horizontal-grid-space;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .dwpp_widget__footer__text {

        }

        .dwpp_widget__button {
            margin-left: $side-spacer;
            flex-shrink: 0;
        }
    }
}


// Light styles
.dwpp_widget.dwpp_widget_theme_light {
    background-color: $light-background-color;
    color: $light-text-color;

    .dwpp_widget__header {

    }

    .dwpp_widget__body {
        background-image: $light-background-1, $light-background-2;
    }

    .dwpp_widget__footer {
        background-color: $light-background-color;
        box-shadow: $light-shadow-color;

        .dwpp_widget__footer__text {
            color: $light-dark-text-color;
        }
    }
}


// Dark styles
.dwpp_widget.dwpp_widget_theme_dark {
    background-color: $dark-background-color;
    color: $dark-text-color;

    .dwpp_widget__header {

    }

    .dwpp_widget__body {
        background-image: $dark-background-1, $dark-background-2;
    }

    .dwpp_widget__footer {
        background-color: $dark-background-color;
        box-shadow: $dark-shadow-color;

        .dwpp_widget__footer__text {
            color: $dark-dark-text-color;
        }
    }
}


// Chat widget
.dwpp_widget_chat {

    .dwpp_widget__body {
        overflow-y: auto;
    }
}