// Title text class
.dwpp_widget .dwpp_widget__title {
    font-size: $title-text-font-size;
    font-weight: $title-text-font-weight;
    font-family: $title-text-font-family;
    margin-top: $spacer;
    margin-bottom: $spacer;
}

.dwpp_widget.dwpp_widget_theme_light .dwpp_widget__title {
    color: $light-light-text-color;
}

.dwpp_widget.dwpp_widget_theme_dark .dwpp_widget__title {
    color: $dark-light-text-color;
}


// Caps text class
.dwpp_widget_banner,
.dwpp_widget {
    .dwpp_widget__caps {
        font-size: $caps-text-font-size;
        font-weight: $caps-text-font-weight;
        font-family: $caps-text-font-family;
        text-transform: uppercase;
    }
}


// Avatar class
.dwpp_widget .dwpp_widget__avatar {
    border-radius: $avatar-border-radius;
    margin-right: $small-side-spacer;
}


// Custom discord emoji images
.dwpp_widget .dwpp_widget__custom_emoji {
    margin: 0 $small-side-spacer;
    height: 1em;
}


// Custom discord emoji images
.dwpp_widget .dwpp_widget__content_spacer {
    display: block;
    margin-top: $small-vertical-grid-space;
}


// Chat styles
.dwpp_widget .dwpp_widget__chat {

    li {
        margin: 0;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-column-gap: $small-side-spacer;
        grid-row-gap: $small-vertical-grid-space;

        & + li {
            margin-top: $vertical-grid-space;
        }

        .dwpp_widget__chat_avatar {
            display: flex;
            align-items: center;

            img {
                margin: 0;
            }
        }

        .dwpp_widget__chat_name {
            display: flex;
            align-items: center;
            font-weight: $title-text-font-weight;
        }

        .dwpp_widget__chat_message {
            word-break: break-word;

            img:not(.dwpp_widget__custom_emoji) {
                max-width: 100%;
            }

            video {
                width: 100%;
            }
        }
    }
}


// Button class
.dwpp_widget .dwpp_widget__button {
    @include paragraph-text-styles();
    line-height: $paragraph-text-font-size;
    border-width: $border-width;
    border-style: solid;
    border-radius: $border-radius;
    text-decoration: none;
    padding: 7px 32px;
}

.dwpp_widget.dwpp_widget_theme_light .dwpp_widget__button {
    border-color: $light-border-color;
    color: $light-button-text-color;
    background-color: $light-button-bg-color;
    box-shadow: $light-button-shadow-color;
    opacity: .7;

    &:hover,
    &:focus {
        color: $light-button-text-color;
        box-shadow: $light-button-shadow-color;
        background-color: $light-button-bg-color;
        border-color: $light-border-color;
    }
}

.dwpp_widget.dwpp_widget_theme_dark .dwpp_widget__button {
    border-color: $dark-border-color;
    color: $dark-button-text-color;
    background-color: $dark-button-bg-color;
    box-shadow: $dark-button-shadow-color;

    &:hover,
    &:focus {
        opacity: .6;
        color: $dark-button-text-color;
        box-shadow: $dark-button-shadow-color;
        background-color: $dark-button-bg-color;
        border-color: $dark-border-color;
    }
}


// Widget scrollbar
.dwpp_widget {
    &,
    * {
        &::-webkit-scrollbar {
            width: .6em;
            height: .6em;
            background-color: lighten($dark-background-color, 10%);
        }
        &::-webkit-scrollbar-track {
        }
        &::-webkit-scrollbar-thumb {
            border-radius: .6em;
            background-color: lighten($dark-background-color, 30%);
        }
    }

    &.dwpp_widget_theme_light {
        &,
        * {
            &::-webkit-scrollbar {
                background-color: darken($light-background-color, 10%);
            }
            &::-webkit-scrollbar-thumb {
                background-color: darken($light-background-color, 30%);
            }
        }
    }
}


// Widget tags style reset
@mixin reset-tag-styles() {
    background: none;
    border-width: 0;
    bottom: auto;
    top: auto;
    left: auto;
    right: auto;
    box-sizing: content-box;
    color: inherit;
    cursor: auto;
    letter-spacing: normal;
    line-height: normal;
    list-style: none;
    font-style: normal;
    margin: 0;
    max-width: none;
    max-height: none;
    min-width: 0;
    min-height: 0;
    opacity: 1;
    overflow: auto;
    padding: 0;
    position: initial;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    transform: none;
    transition: all 0s ease 0s;
    visibility: visible;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    z-index: auto;
    box-shadow: none;

    &:before,
    &:after {
        display: none;
    }

    div {
        display: block;
    }

    span {
        display: inline;
    }

    a {
        display: inline;
        cursor: pointer;
    }

    img {
        display: inline-block;
    }

    p {
        display: block;
        margin-bottom: $small-vertical-grid-space;
    }

    li {
        display: flex;
        align-items: center;
        margin: $small-vertical-grid-space 0 $small-vertical-grid-space  $side-spacer;
        word-break: break-word;
    }

    ul {
        display: block;

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

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

    s {
        text-decoration: line-through;
    }

    u {
        text-decoration: underline;
    }

    i {
        font-style: italic;
    }
}