@include export-module('co-timeline-layout') {
  .co-timeline {
    .co-timeline-wrapper {
      padding: $timeline-wrapper-padding;
      display: flex;
      flex-direction: column;
      gap: $timeline-year-item-gap;
    }
    .year-item {
      display: flex;
      flex-direction: column;
      gap: $timeline-year-item-gap;
    }
    .state-change-wrapper {
      display: flex;
      gap: $timeline-state-change-gap;
      background: $timeline-state-change-background;
      padding: $timeline-state-change-padding;
      width: fit-content;
      border-radius: $timeline-state-change-border-radius;
      .state-change-content {
        display: flex;
        gap: $timeline-state-change-content-gap;
        font-size: $timeline-state-change-content-font-size;
        color: $timeline-state-change-content-color;
        text-transform: uppercase;
        .change-desc {
          font-weight: $timeline-state-change-change-desc-font-weight;
        }
      }
      .state-change-date {
        font-size: $timeline-state-change-date-font-size;
        color: $timeline-state-change-content-color;
        font-weight: $timeline-state-change-date-font-weight;
        text-transform: uppercase;
      }
    }
    .timeline-item-wrapper {
      display: flex;
      border-radius: $timeline-item-wrapper-border-radius;
      padding: $timeline-item-wrapper-padding;
      box-shadow: $timeline-item-wrapper-box-shadow;
      background-color: $timeline-item-wrapper-background;
      min-width: $timeline-item-wrapper-min-width;
      width: fit-content;
    }
    .timeline-item {
      display: flex;
      width: 100%;
      position: relative;
      align-items: start;
      gap: $timeline-item-gap;
      padding: $timeline-item-padding;
      .timeline-date-wrapper {
        position: absolute;
        right: 0;
        top: 0;
        .timeline-date {
          font-size: $timeline-item-date-font-size;
          display: flex;
          align-items: center;
          gap: $timeline-item-date-gap;
          color: $timeline-item-date-color;
          .co-icon {
            cursor: pointer;
          }
        }
      }
      .co-icon {
        width: $timeline-item-icon-size;
        height: $timeline-item-icon-size;
      }
    }
  }
}