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

$tabs: summary, timelines, status, shipped, duration, vendors;

@each $tab in $tabs {
  .#{$tab} {
    .stats-tab {
      &:not(.#{$tab}) {
        max-height: 100vh;
        overflow: hidden;
      }
    }
  }
}

.stats-tab {
  padding: 16px;
  margin: 0 auto;
  max-width: 2400px;
  width: 100%;
  .mdc-card {
    grid-column: span 1;
    padding: 16px;
    overflow: hidden;
    margin-top: 16px;
    &:first-of-type {
      margin-top: 0;
    }
    &.count-graph,
    &.profile-graph {
      .mdc-typography--headline5 {
        margin-top: 0;
        margin-bottom: 16px;
      }
      .mdc-typography--caption {
        margin-top: 8px;
        margin-bottom: 0;
      }
    }
    .graph-container {
      max-width: 100%;
      overflow: auto;
      .ct-chart {
        min-width: 680px;
      }
    }
    &.profile-graph {
      display: flex;
      flex-direction: column;
      justify-content: stretch;
      .title-container {
        display: flex;
        justify-content: stretch;
        flex-wrap: wrap;
        .mdc-typography--headline5 {
          flex-grow: 1;
          flex-shrink: 0;
          @include rtl.reflexive-box(margin, right, 16px);
        }
        .segmented-button {
          flex-grow: 0;
          flex-shrink: 0;
          margin-bottom: 12px;
        }
      }
      .ct-chart {
        .ct-point,
        .ct-line,
        .ct-bar,
        .ct-slice-donut {
          transition: animation.standard(stroke, 200ms);
        }
        .ct-slice-pie,
        .ct-donut-solid,
        .ct-area {
          transition: animation.standard(fill, 200ms);
        }
      }
      .chips-container {
        display: flex;
        padding-top: 8px;
        margin: -8px;
        .mdc-chip-set {
          flex-grow: 1;
        }
      }
    }
    &.fullwidth {
      padding: 0;
      overflow: hidden;
    }
  }
  &.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 16px;
    .mdc-card {
      margin: 0;
      &.full-span {
        grid-column: span 4;
      }
      &.half-span {
        grid-column: span 2;
      }
    }

    @media (min-width: 2400px) {
      grid-template-columns: repeat(8, 1fr);
    }
    @media (max-width: 1199px) {
      grid-template-columns: repeat(3, 1fr);
      .mdc-card {
        &.full-span {
          grid-column: span 3;
        }
        &.half-span {
          grid-column: span 3;
        }
      }
    }
    @media (max-width: 1239px) {
      grid-template-columns: repeat(2, 1fr);
      .mdc-card {
        &.full-span,
        &.half-span {
          grid-column: span 2;
        }
      }
    }
    @media (max-width: 599px) {
      grid-template-columns: repeat(1, 1fr);
      .mdc-card {
        &.full-span,
        &.half-span {
          grid-column: span 1;
        }
      }
    }
  }
}
