@include export-module('co-activity-timeline-layout') {
  .co-activity-timeline {
    .leaf-wrapper {
      display: flex;
      flex-direction: column;
      gap: $leaf-wrapper-gap;
    }
    .leaf-task-open {
      position: absolute;
      right: 0;
      bottom: 0;
      cursor: pointer;
    }
    .co-activity-leaf {
      .leaf-header {
        font-size: $leaf-header-font-size;
      }
      .leaf-body {
        .trigger-wrapper {
          display: flex;
          gap: $leaf-trigger-wrapper-gap;
          .workflow-state {
            font-size: 11px;
            display: flex;
            align-items: center;
            gap: $leaf-trigger-state-end-gap;
            &.next {
              gap: $leaf-trigger-state-gap;
            }
            &.ended {
              color: $leaf-trigger-state-end-color;
            }
            .co-icon {
              svg {
                fill: $leaf-trigger-state-end-color;
              }
            }
          }
          .trigger-button {
            padding: 7px 15px;
            border: 1px solid $leaf-trigger-state-color;
            color: $leaf-trigger-state-color;
            border-radius: $leaf-trigger-state-border-radius;
            cursor: pointer;
            background: #FFF;
            transition: all 0.2s ease-in-out;
            &:hover {
              color: #FFF;
              background: $leaf-trigger-state-color;
              transition: all 0.2s ease-in-out;
            }
          }
        }
      }
      .remark-content {
        font-size: $leaf-header-font-size;
      }
    }
  }
}