@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;

        .activity-display {
          display: flex;
          flex-direction: column;
          row-gap: 5px;
          width: 100%;
          max-width: 800px;

          .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;
            }
          }

          .activity-display-content {
            display: flex;
            flex-direction: column;
            border-radius: 5px;
            background-color: $sc-color-light;
            padding: 15px;
            color: #000;
            box-shadow: 0px 2px 4px 0px #0000001A;
            .co-icon {
              svg {
                fill: #FFFFFF;
              }
            }
            .activity-display-body {
              display: flex;
              align-items: center;
              span {
                font-size: 12px;
              }
            }

            .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;
                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-content {
            background-color: $sc-color-light-accent;
            color: #171721;
            .co-icon {
              svg {
                fill: #FFFFFF;
              }
            }
          }
        }
      }
      .customer-reply-wrapper {
        justify-content: flex-start;
      }
    }
  }
}
