@import 'pack/seed-family/__index';

.c-Notification {
  @import '../../resets/base';
  $bubbleClassName: '.c-Notification__messageBubble';
  $br: 8px;
  $br-sm: 2px;

  #{$bubbleClassName} {
    background-color: white;
    border-color: transparent !important;
    box-shadow: 0 0 0 1px rgba(black, 0.1), 0 4px 6px rgba(black, 0.15);
    cursor: pointer;
    max-width: 100%;
    text-align: right;
    transition: border-radius 200ms ease;
  }

  & + .c-Notification {
    #{$bubbleClassName} {
      border-top-right-radius: 8px !important;
    }
  }

  &:last-child {
    #{$bubbleClassName} {
      border-top-right-radius: 8px !important;
      border-bottom-left-radius: 8px !important;
    }
  }

  &__text {
    color: _color(charcoal, 500);
    font-size: 13px;
  }

  // Modifiers
  &.is-align-right {
    #{$bubbleClassName} {
      border-top-left-radius: $br !important;
      border-top-right-radius: $br-sm !important;
      border-bottom-right-radius: $br-sm !important;
      border-bottom-left-radius: $br !important;
    }

    &:only-child {
      #{$bubbleClassName} {
        border-top-right-radius: $br !important;
      }
    }

    &:not(:only-child) {
      #{$bubbleClassName} {
        border-top-right-radius: $br-sm !important;
      }
    }

    &:first-child:not(:last-child) {
      #{$bubbleClassName} {
        border-top-right-radius: $br !important;
      }
    }
  }

  &.is-align-left {
    #{$bubbleClassName} {
      border-top-left-radius: $br-sm !important;
      border-top-right-radius: $br !important;
      border-bottom-right-radius: $br !important;
      border-bottom-left-radius: $br-sm !important;
      text-align: left;
    }

    .c-MessageChatBlock__flexy {
      justify-content: flex-start;
    }
    .c-MessageBubble__from {
      text-align: left;
    }

    &:not(:only-child) {
      #{$bubbleClassName} {
        border-top-right-radius: $br !important;
        border-bottom-left-radius: $br-sm !important;
      }
    }

    &:first-child:not(:only-child) {
      #{$bubbleClassName} {
        border-top-left-radius: $br !important;
        border-bottom-left-radius: $br-sm !important;
        border-bottom-right-radius: $br !important;
      }
    }
  }
}