dappros/ethora

@import "../variables";
@import "../helpers/mixins";


// Positions
$_message-group-avatar-justify-content: flex-end;

/********** Styles **********/
.#{$prefix}-message-group {
  
  // Local alias
  $group-class: &;
  $message-class: #{$prefix}-message;
  $avatar-class: #{$prefix}-avatar;

  box-sizing: border-box;
  @include flex-row;
  margin: $message-group-margin;
  
  &__avatar {
    box-sizing: border-box;
    @include flex-column;
    justify-content: $_message-group-avatar-justify-content;
  }
  
  // Container for header, message and footer
  &__content {
    box-sizing: border-box;
    @include flex-column;
  }
  
  &__header {
    box-sizing: border-box;
    display:flex;
    font-size: $message-group-header-font-size;
    font-family: $message-group-header-font-family;
    color: $message-group-header-color;
    background-color: $message-group-header-bg-color;
    margin: $message-group-header-margin;
    padding: $message-group-header-padding;
  }
  
  &__footer {
    box-sizing: border-box;
    display:flex;
    font-size: $message-group-footer-font-size;
    font-family: $message-group-footer-font-family;
    color: $message-group-footer-color;
    background-color: $message-group-footer-bg-color;
    margin: $message-group-footer-margin;
    padding: $message-group-footer-padding;
  }
  
  &__messages {
    box-sizing: border-box;
    // First message in group
    .#{$prefix}-message:first-child {
      margin-top:0;
    }

    // Every message in group
    .#{$prefix}-message {
      .#{$message-class}__content {
        background-color: $message-group-message-content-bg-color;
        margin-top:0;
      }
    }
    
    // Last message in group
    .#{$prefix}-message:last-child {

    }

  }
  
  // Modifier - group of incoming messages
  &--incoming {
    justify-content: flex-start;

    & #{$group-class}__avatar {
      margin-right: 8px;
      order: 0;
    }
    
    & #{$group-class}__content {
      order:1;
    }
    
    & #{$group-class}__messages {
      
      // First message in incoming group
      & .#{$message-class}:first-child .#{$message-class}__content {
        border-radius: $message-group-incoming-message-content-first-border-radius;
      }

      // Message in incoming group
      & .#{$message-class} .#{$message-class}__content {
        border-radius: $message-group-incoming-message-content-border-radius;
        color: $message-group-message-content-incoming-color;
        background-color: $message-group-message-content-incoming-bg-color;
      }
      
      // Last message in incoming group
      & .#{$message-class}:last-child .#{$message-class}__content {
        border-radius: $message-group-incoming-message-content-last-border-radius;
      }

      // Single message in incoming group
      // !!! only-child must be placed after last-child
      .#{$prefix}-message:only-child .#{$message-class}__content {
        border-radius: $message-group-incoming-message-content-single-border-radius;
      }
      
    }
    
  }

  // Modifier - group of outgoing messages
  &--outgoing  {
    justify-content: flex-end;
    margin-left: auto;
    
    & #{$group-class}__avatar {
      margin-left: 8px;
      order: 1;
    }

    & #{$group-class}__content {
      order:0;
    }

    & #{$group-class}__messages {

      & .#{$message-class} {
        justify-content: flex-end;
      }
      
      // First message in outgoing group
      & .#{$message-class}:first-child .#{$message-class}__content {
        border-radius: $message-group-outgoing-message-content-first-border-radius;
      }

      // Message in outgoing group
      & .#{$message-class} .#{$message-class}__content {
        border-radius: $message-group-outgoing-message-content-border-radius;
        color: $message-group-message-content-outgoing-color;
        background-color: $message-group-message-content-outgoing-bg-color;
      }

      // Last message in outgoing group
      & .#{$message-class}:last-child .#{$message-class}__content {
        border-radius: $message-group-outgoing-message-content-last-border-radius;
      }

      // Single message in outgoing group
      // !!! only-child must be placed after last-child
      .#{$prefix}-message:only-child .#{$message-class}__content {
        border-radius: $message-group-outgoing-message-content-single-border-radius;
      }

    }
  }
  
  // Avatar position
  // By default incoming and default message has avatar on left and outgoing has avatar on right.
  // This can be changed by adding --avatar-left or avatar-right modifier
  &--avatar-tl {
    
    #{$group-class}__avatar {
      justify-content: flex-start;
      order:0;
      margin-right: $message-group-avatar-horizontal-margin;
      margin-left:0;
    }
    
    #{$group-class}__content {
      order:1;
    }
  }

  &--avatar-tr {
    #{$group-class}__avatar {
      justify-content: flex-start;
      order:1;
      margin-left: $message-group-avatar-horizontal-margin;
      margin-right:0;
    }

    #{$group-class}__content {
      order:0;
    }
  }

  &--avatar-bl {
    #{$group-class}__avatar {
      justify-content: flex-end;
      order:0;
      margin-right: $message-group-avatar-horizontal-margin;
      margin-left:0;
    }

    #{$group-class}__content {
      order:1;
    }
  }

  &--avatar-br {
    #{$group-class}__avatar {
      justify-content: flex-end;
      order:1;
      margin-left: $message-group-avatar-horizontal-margin;
      margin-right:0;
    }
    
    #{$group-class}__content {
      order:0;
    }
  }

  &--avatar-cl {
    
    #{$group-class}__avatar {
      justify-content: center;
      order:0;
      margin-right: $message-group-avatar-horizontal-margin;
      margin-left:0;
    }

    #{$group-class}__content {
      order:1;
    }
  }

  &--avatar-cr {
    #{$group-class}__avatar {
      justify-content: center;
      order:1;
      margin-left: $message-group-avatar-horizontal-margin;
      margin-right:0;
    }

    #{$group-class}__content {
      order:0;
    }
  }
  
}