@include export-module('cc-activity-list-layout') {
  .co-activity-list {
    .activity-list-wrapper {
      display: flex;
      flex-direction: column;
      gap: 20px;
      .activity-wrapper {
        display: flex;
        justify-content: flex-end;
        border-radius: 5px;
        padding: 15px;
        box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.1);
        background-color: $sc-color-light;
        .activity-display {
          display: flex;
          flex-direction: column;
          row-gap: 5px;
          width: 100%;
          .activity-display-title {
            display: flex;
            flex-direction: row;
            column-gap: 10px;
            align-items: center;
            justify-content: flex-end;
            padding-right: 5px;
            font-size: 11px;
            .co-icon {
              width: 30px;
              height: 20px;
              padding-left: 10px;
            }
            span {
              font-size: 10px;
            }
          }

          .activity-display-content {
            display: flex;
            flex-direction: column;
            padding: 0;
            color: #000;
            .co-icon {
              svg {
                fill: $sc-color-font;
              }
            }
            .activity-display-body {
              display: flex;
              align-items: center;
              gap: 15px;
              span {
                font-size: 12px;
              }
              .activity-icon {
                border-radius: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 30px;
                .co-icon {
                  width: 18px;
                  height: 18px;
                }
              }
            }

            .activity-display-footer {
              position: relative;
              padding-top: 10px;

              .activity-fired-triggers {
                position: absolute;
                left: 0px;
                display: flex;
                flex-direction: row;
                column-gap: 5px;
                align-items: center;
                .activity-fired-trigger {
                  border-radius: 5px;
                  background-color: $sc-color-trigger;
                  font-size: x-small;
                  padding-top: 5px;
                  padding-bottom: 5px;
                  padding-left: 20px;
                  padding-right: 20px;
                  span {
                    color: #FFF;
                  }
                }
              }
              .icon-indicators {
                position: absolute;
                right: -10px;
                bottom: -10px;
                display: flex;
                flex-direction: row;
                align-items: center;
                column-gap: 5px;
              }

              .co-icon {
                width: 20px;
                height: 20px;
                svg { // for fontawesome icons
                  fill: $sc-color-font;
                }
                & [fill] { // for own icons
                  fill:  $sc-color-font;
                }
              }
            }
            .extra-height {
              height: 30px;
            }
          }
        }
        &.customer-reply-wrapper {
          max-width: 80%;
          background-color: #f5f5fc;
        }
      }
    }
  }
}