// 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, 1%) !default;
$chat-left-content-color: $text-color !default;
$chat-time-color:         rgba(255, 255, 255, 0.6) !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;
  }

  & + &:before {
    border-color: transparent;
  }
}

.chat-time {
  color: $chat-time-color;
}

// 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;
      border-left-color: transparent;
    }
  }

  .chat-content + .chat-content:before {
    border-color: transparent;
  }

  .chat-time {
    color: $chat-left-time-color;
  }
}