// Name:            Chat
//
// Component:       `chat`
//
// ========================================================================

// Variables
// ========================================================================

$chat-content-bg:         $brand-primary !default;
$chat-content-color:      $color-white !default;

$chat-left-content-bg:    darken($bg-color-base, 6%) !default;
$chat-left-content-color: $text-color !default;
$chat-left-time-color:    $prompt-color !default;



// Component: Chat
// ========================================================================

.chat-box {
  background-color: $inverse;
}

.chat-content {
 
  color: $chat-content-color;
  background-color: $chat-content-bg;

  &:before {
    border: 5px solid transparent;
    border-left-color: $chat-content-bg;
  }
}

// Modifier: `chat-left`
// ========================================================================

.chat-left {
  .chat-content {
    color: $chat-left-content-color;
    background-color: $chat-left-content-bg;

    &:before {
      border-right-color: $chat-left-content-bg;
    }
  }
}