@use "@material/rtl/_index" as rtl;
@use "@material/shape/_index" as shape;

.timeline-card {
  .title-container {
    display: flex;
    align-items: flex-start;
    .text-container {
      flex-grow: 1;
      .mdc-typography--overline {
        margin: 0;
      }
      .mdc-typography--headline5 {
        margin-top: 0;
        margin-bottom: 8px;
      }
      .mdc-typography--subtitle2 {
        margin-top: 0;
        margin-bottom: 16px;
      }
    }
    .button-container {
      display: flex;
      align-items: center;
      .mdc-icon-button {
        & + .segmented-button {
          @include rtl.reflexive-box(margin, left, 8px);
        }
      }
    }
  }
  .timeline-container {
    display: flex;
    flex-direction: column;
    .table-container {
      & + .timeline-chips-container {
        padding-top: 16px;
      }
      flex-grow: 1;
      .mdc-data-table {
        width: 100%;
        .mdc-data-table__table {
          width: 100%;
          .mdc-data-table__cell {
            position: relative;
            .indicator {
              position: absolute;
              width: 4px;
              height: 100%;
              @include rtl.reflexive-position(left, 0);
              top: 0;
              bottom: 0;
              &.not-shipped {
                background-color: var(--theme-divider);
              }
            }
          }
        }
      }
    }
    .timeline-chips-container {
      display: flex;
      padding-top: 8px;
      margin: -8px;
      .mdc-chip-set {
        flex-grow: 1;
      }
    }
    .note {
      margin: 8px 0 0;
    }
  }
}

.timeline-card.full-span {
  .timeline-chart-container {
    max-width: 100%;
    overflow: auto;
    .ct-chart {
      min-width: 680px;
    }
  }
}
