$dialogBoxClass: pl-dialog-box;

.#{$dialogBoxClass} {
    display: block;
    clear: both;
    text-align: right;

    &--inbound {
        float: left;
    }

    &--outbound {
        float: right;
    }

    &__content {
        padding: 8px;
        background: theme-color("secondary");;
        border: 1px solid theme-color("secondary");;
        border-radius: 8px;
        max-width: 165px;
        min-width: 40px;
        display: inline-block;
        margin: 0 0 4px 0;
        text-align: left;
    }

    &--outbound {
        .#{$dialogBoxClass}__content {
            &--sent {
                background: theme-color("primary");
                color: theme-color("light");
            }

             &--scheduled {
                background: theme-color("primary");
                color: theme-color("light");
                border-color: theme-color("primary");
            } 

            &--preview {
                background: theme-color("secondary");
                color: theme-color("gray");
                border-style: dashed;
                border-color: theme-color("gray-light");
            }
        }
    }

    &__timestamp {
        font-size: $font-size-sm;
        text-align: left;
        color: theme-color("gray-dark");
    }
}