// Lightning Design System 2.29.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
 * This component is used to display a current or past chat session between a customer and a service agent.
 * It appears in the form of a "Log"
 *
 * @summary Root container of a chat session
 * @name base
 * @selector .slds-chat
 * @restrict section[role="log"]
 * @support dev-ready
 * @variant
 */
.slds-chat {
  margin-bottom: $spacing-small;
}

/**
 * The chat payload should be displayed in the form of a list. Each item in the list has a number of vertical and horizontal spacing rules based on its type
 *
 * @summary Handles the display of chat items within a list
 * @selector .slds-chat-list
 * @restrict .slds-chat ul
 */
.slds-chat-list {
  padding: 0 $spacing-small;
}

/**
 * @summary Handles spacing and direction of items in the list
 * @selector .slds-chat-listitem
 * @restrict .slds-chat-list li
 */
.slds-chat-listitem {
  display: flex;
  margin-top: $spacing-small;
}

/**
 * @summary Modifier used to style outbound message list items
 * @selector .slds-chat-listitem_outbound
 * @restrict .slds-chat-listitem
 * @modifier
 */
.slds-chat-listitem_outbound {
  justify-content: flex-end;
}

/**
 * @name inbound-message
 * @summary Modifier used to style inbound message list items
 * @selector .slds-chat-listitem_inbound
 * @restrict .slds-chat-listitem
 * @modifier
 * @group dialog
 */

/**
 * @summary Selector to style sibling, same type message list items
 * @selector .slds-chat-listitem_inbound + .slds-chat-listitem_inbound, .slds-chat-listitem_outbound + .slds-chat-listitem_outbound
 */
.slds-chat-listitem_inbound + .slds-chat-listitem_inbound,
.slds-chat-listitem_outbound + .slds-chat-listitem_outbound {
  margin-top: $spacing-xx-small;
}

/**
 * @summary Modifier used for spacing bookend items
 * @selector .slds-chat-listitem_bookend
 * @restrict .slds-chat-listitem
 */
.slds-chat-listitem_bookend {
  margin: $spacing-medium 0;
  margin-left: ($spacing-small * -1);
  margin-right: ($spacing-small * -1);
}

.slds-chat-listitem_bookend + .slds-chat-listitem_bookend {
  margin-top: $spacing-xx-large;
}

/**
 * @summary Modifier used for spacing event items
 * @selector .slds-chat-listitem_event
 * @restrict .slds-chat-listitem
 */
.slds-chat-listitem_event {
  margin: $spacing-large 0;
}


/**
 * @summary Used to style icons with a chat log
 * @selector .slds-chat-icon
 * @restrict .slds-chat-message__text .slds-icon_container, .slds-chat-event__body .slds-icon_container, .slds-chat-bookend .slds-icon_container, .slds-chat-message__action .slds-icon_container
 */
.slds-chat-icon {
  margin-right: $spacing-x-small;
}

/**
 * Chat logs are mainly made up of chat messages between an agent and a customer
 *
 * @summary styles the outter part of a chat message
 * @selector .slds-chat-message
 * @restrict .slds-chat-listitem div
 */
.slds-chat-message {
  display: flex;
}

/**
 * @summary Used for when customer avatars are used in consequtive inbound messages to align the message body with the previous message
 * @selector .slds-chat-message_faux-avatar
 * @restrict .slds-chat-message
 */
.slds-chat-message_faux-avatar {
  padding-left: ($spacing-x-large + $spacing-x-small);
}

/**
 * @summary Used to style avatars in chat logs
 * @selector .slds-chat-avatar
 * @restrict .slds-chat-message .slds-avatar
 */
.slds-chat-avatar {
  margin-right: $spacing-x-small;
  min-width: 2rem;
}

/**
 * @summary Used to style the avatar intials for chat
 * @selector .slds-chat-avatar__intials
 * @restrict .slds-chat-avatar .slds-avatar__initials
 * @deprecated
 */
@include deprecate('4.0.0', 'Use slds-avatar__initials_inverse instead') {

  .slds-chat-avatar__intials {
    background-color: var(--slds-g-color-neutral-base-95, #{$chat-message-color-background-inbound});
    color: var(--slds-g-color-neutral-base-30, #{$color-text-weak});

    // combat abbr override styling in avatar
    &.slds-chat-avatar__intials:hover {
      color: var(--slds-g-color-neutral-base-30, #{$color-text-weak});
    }
  }
}

/**
 * @summary Used to contain and align chat messages with their avatars
 * @selector .slds-chat-message__body
 * @restrict .slds-chat-message div
 */

.slds-chat-message__body {
  display: flex;
  flex-direction: column;
}

/**
 * @summary
 * @selector .slds-chat-message__image_loading
 * @restrict .slds-chat-message__body
 */
.slds-chat-message__image_loading {
  width: $size-small;
  height: rem(180px);
}

/**
 * @summary Used to style the chat text from agent or customer
 * @selector .slds-chat-message__text
 * @restrict .slds-chat-message__body div
 */
.slds-chat-message__text {
  @include break-word;
  display: inline-block;
  font-size: $font-size-3;
  max-width: rem(420px);
  white-space: pre-line;

  :where(a) {
    color: var(--slds-g-link-color-focus, #{$color-brand-darker});
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
}

/**
 * @summary
 * @selector .slds-chat-message__file
 * @restrict .slds-chat-message__body div
 */
.slds-chat-message__file {
  width: $size-small;
}

// For some reason, content from Files is bleeding through the border radius set by .slds-chat-message__image and __file. Because Files in this instance has a different hover behavior than normal, this is ok.
.slds-chat-message__file,
.slds-chat-message__image {
  overflow: hidden;

  // Resets the default File hover behavior and replaces it with a in-Chat-specific behavior
  .slds-file:hover {
    box-shadow: none;
    transition: none;
  }

  &:focus-within {
    box-shadow: var(--slds-g-shadow-outset-focus-1, #{$shadow-button-focus});
  }
}

.slds-chat-message__text_inbound,
.slds-chat-message__file_inbound,
.slds-chat-message__image_inbound,
.slds-chat-message__text_outbound,
.slds-chat-message__file_outbound,
.slds-chat-message__image_outbound,
.slds-chat-message__text_outbound-agent,
.slds-chat-message__text_unsupported-type,
.slds-chat-message__text_delivery-failure {
  border-radius: $border-radius-large $border-radius-large 0;
  color: var(--slds-g-color-neutral-base-100, #{$color-text-inverse});
  min-height: 2rem;
}

.slds-chat-message__text_inbound,
.slds-chat-message__text_outbound,
.slds-chat-message__text_outbound-agent,
.slds-chat-message__text_unsupported-type,
.slds-chat-message__text_delivery-failure {
  padding: $spacing-x-small;
}

.slds-chat-message__file_inbound,
.slds-chat-message__image_inbound,
.slds-chat-message__file_outbound,
.slds-chat-message__image_outbound {
  padding: 0;
  border: $border-width-thin solid var(--slds-g-color-border-base-1, #{$color-border});
}

.slds-chat-message__file_inbound,
.slds-chat-message__image_inbound,
.slds-chat-message__file_outbound,
.slds-chat-message__image_outbound {
  color: var(--slds-g-color-neutral-base-10, #{$color-text-default});
}

/**
 * @summary Used for any specific inbound text styling
 * @selector .slds-chat-message__text_inbound
 * @restrict .slds-chat-message__text
 */
.slds-chat-message__text_inbound {
  margin-right: auto;
  background-color: var(--slds-g-color-neutral-base-95, #{$chat-message-color-background-inbound});
  border-radius: $border-radius-large $border-radius-large $border-radius-large 0;
  color: var(--slds-g-color-neutral-base-10, #{$color-text-default});
}

/**
 * @summary Used for any specific inbound image styling
 * @selector .slds-chat-message__image_inbound
 * @restrict .slds-chat-message__image
 */
.slds-chat-message__image_inbound {
  background-color: var(--slds-g-color-neutral-base-95, #{$chat-message-color-background-inbound});
  border-radius: $border-radius-large $border-radius-large $border-radius-large 0;
}

/**
 * @summary Used for any specific inbound file styling
 * @selector .slds-chat-message__file_inbound
 * @restrict .slds-chat-message__file
 */
.slds-chat-message__file_inbound {
  border-radius: $border-radius-large $border-radius-large $border-radius-large 0;
  background-color: var(--slds-g-color-neutral-base-100, #{$color-background-alt});
}

/**
 * @summary Used for any specific outbound text styling
 * @selector .slds-chat-message__text_outbound
 * @restrict .slds-chat-message__text
 */
.slds-chat-message__text_outbound {
  margin-left: auto;
  background-color: var(--slds-g-color-brand-base-30, #{$chat-message-color-background-outbound});
}

/**
 * @summary Used for any specific outbound (from another agent) text styling
 * @selector .slds-chat-message__text_outbound-agent
 * @restrict .slds-chat-message__text
 */
.slds-chat-message__text_outbound-agent {
  background-color: var(--slds-g-color-neutral-base-50, #{$chat-message-color-background-outbound-agent});
  margin-left: auto;
}

.slds-chat-message__text_outbound,
.slds-chat-message__text_outbound-agent {

  :where(a) {
    color: var(--slds-g-color-neutral-base-100, #{$color-text-inverse});
    text-decoration: underline;

    &:hover,
    &:focus-visible {
      color: var(--slds-g-color-neutral-base-100, #{$color-text-inverse});
    }
  }
}

/**
 * @name unsupported
 * @summary Used for an inbound message that is not a supported message type
 * @selector .slds-chat-message__text_unsupported-type
 * @restrict .slds-chat-message__text
 * @modifier
 * @group feedback
 */
.slds-chat-message__text_unsupported-type {
  background-color: var(--slds-g-color-neutral-base-100, #{$chat-message-color-background-status});
  border-radius: $border-radius-large $border-radius-large $border-radius-large 0;
  border: var(--slds-g-color-warning-base-60, #{$color-border-warning}) $border-width-thin solid;
  color: var(--slds-g-color-neutral-base-10, #{$color-text-default});
  margin-right: auto;

  @include deprecate('4.0', 'Please use slds-icon-text-warning modifier for slds-icon') {

    .slds-chat-icon.slds-icon-utility-warning {

      .slds-icon {
        fill: var(--slds-g-color-warning-base-50, #{$color-text-warning});
      }
    }
  }
}

/**
 * @name delivery-failure
 * @summary Used for an inbound message that fails to deliver
 * @selector .slds-chat-message__text_delivery-failure
 * @restrict .slds-chat-message__text
 * @modifier
 * @group feedback
 */
.slds-chat-message__text_delivery-failure {
  background-color: var(--slds-g-color-neutral-base-100, #{$chat-message-color-background-status});
  border: var(--slds-g-color-error-base-40, #{$color-border-destructive}) $border-width-thin solid;
  color: var(--slds-g-color-neutral-base-10, #{$color-text-default});
  margin-left: auto;

  /**
   * @summary Element that contains feedback for why inbound message failed
   * @selector .slds-chat-message__text_delivery-failure-reason
   * @restrict .slds-chat-message__text_delivery-failure [role="alert"]
   */
  .slds-chat-message__text_delivery-failure-reason {
    display: flex;
    padding: $spacing-x-small $spacing-x-small 0;
    margin: $spacing-x-small #{-$spacing-x-small} 0;
    color: var(--slds-g-color-error-base-40, #{$color-text-error});
    border-top: var(--slds-g-color-error-base-40, #{$color-border-destructive}) $border-width-thin solid;
  }

  @include deprecate('4.0', 'Please use slds-icon-text-error modifier for slds-icon') {

    .slds-chat-icon.slds-icon-utility-error {

      .slds-icon {
        fill: var(--slds-g-color-error-base-40, #{$color-text-error});
      }
    }
  }
}

/**
 * @summary Used when sneak peek is enabled for customer messages
 * @selector .slds-chat-message__text_sneak-peek
 * @restrict .slds-chat-message__text
 * @modifier
 */
.slds-chat-message__text_sneak-peak,
.slds-chat-message__text_sneak-peek {
  font-style: italic;

  .slds-icon-typing {
    margin-right: $spacing-x-small;
  }
}

/**
 * @summary Used to style chat message meta data
 * @selector .slds-chat-message__meta
 * @restrict .slds-chat-message div
 */
.slds-chat-message__meta {
  color: var(--slds-g-color-neutral-base-30, #{$color-text-weak});
  font-size: $font-size-1;
  margin: $spacing-xxx-small 0 0 $spacing-x-small;
}

/**
 * @summary Used to style chat message resend action
 * @selector .slds-chat-message__action
 * @restrict .slds-chat-message .slds-button
 */
.slds-chat-message__action {
  font-size: $font-size-2;
  margin-left: $spacing-x-small;
  line-height: $line-height-heading;

  .slds-chat-icon.slds-icon-utility-redo {

    .slds-icon {
      @include square($square-icon-small-content);
      fill: var(--slds-g-link-color, #{$color-text-link});
    }
  }
}


/**
 * @summary During any chat, certain events can occur which need to be displayed to the user
 * @selector .slds-chat-event
 * @restrict .slds-chat-listitem div
 */
.slds-chat-event {

  align-items: center;
  color: var(--slds-g-color-neutral-base-30, #{$color-text-weak});
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  font-size: $font-size-3;
  text-align: center;
  width: 100%;

  /**
    * @name error
    * @summary Modifier to indicate the event was an error
    * @selector .slds-has-error
    * @restrict .slds-chat-event[role="alert"]
    * @modifier
    * @group feedback
    */
  &.slds-has-error {
    color: var(--slds-g-color-error-base-40, #{$color-text-error});

    svg {
      fill: var(--slds-g-color-error-base-40, #{$color-text-error});
    }
  }
}

/**
  * @summary Used to style the horizontal rules on an event
  * @selector .slds-chat-event__rule
  * @restrict .slds-chat-event div
  * @deprecated
  */
@include deprecate('4.0', 'Horizontal rules are no longer used on events') {

  .slds-chat-event__rule {
    border-top: $border-width-thin var(--slds-g-color-border-base-1, #{$color-border}) solid;
    height: rem(1px);
    flex-grow: 1;
  }
}

/**
  * @summary Used for styling the event body text
  * @selector .slds-chat-event__body
  * @restrict .slds-chat-event div
  */
.slds-chat-event__body {
  align-items: center;
  display: flex;
  margin: 0 $spacing-x-small;
}

/**
  * @summary Used to style any messages from an agent in the event
  * @selector .slds-chat-event__agent-message
  * @restrict .slds-chat-event div
  */
.slds-chat-event__agent-message {
  flex-grow: 3;
  font-size: $font-size-2;
  font-style: italic;
  margin-top: $spacing-x-small;
  width: 100%;
}


/**
 * Chat sessions are started and stopped with bookends to the conversation
 *
 * @summary Used to style a chat bookend
 * @selector .slds-chat-bookend
 * @restrict .slds-chat-listitem div
 */
.slds-chat-bookend {
  align-items: center;
  border: var(--slds-g-color-border-base-1, #{$color-border}) 0 solid;
  border-bottom-width: $border-width-thin;
  color: var(--slds-g-color-neutral-base-30, #{$color-text-weak});
  display: flex;
  font-size: $font-size-3;
  justify-content: center;
  padding: $spacing-x-small $spacing-small;
  width: 100%;
}

/**
 * @name stop
 * @summary Modifier for bookends which stop a chat session
 * @selector .slds-chat-bookend_stop
 * @restrict .slds-chat-bookend
 * @modifier
 * @group dialog
 */
.slds-chat-bookend_stop {
  border-width: $border-width-thin 0 0;
}