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

.pie-card {
  .mdc-typography--overline {
    margin: 0;
  }
  .mdc-typography--headline5 {
    margin-top: 0;
    margin-bottom: 8px;
  }
  .mdc-typography--subtitle2 {
    margin-top: 0;
    margin-bottom: 16px;
  }
  .pie-container {
    display: flex;
    flex-direction: column;
    .table-container {
      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,
              &.pre-gb {
                background-color: var(--theme-divider);
              }
              &.ic {
                background-color: var(--theme-lighter-divider);
              }
            }
          }
        }
      }
    }
  }
  .pie-chips-container {
    display: flex;
    padding-top: 8px;
    margin: -8px;
    .mdc-chip-set {
      flex-grow: 1;
    }
  }
  &.sideways {
    .pie-container {
      flex-direction: row;
      align-items: center;
      .pie-chart-container {
        flex: 1 0 25%;
        display: flex;
        justify-content: center;
      }
      .table-container {
        @include rtl.reflexive-box(margin, left, 16px);
        flex: 1 1 75%;
      }
    }
  }
}
