// Ensures that the internal chip container spans the entire outer container width, if the
// outer container width is customized. This is used by some wrapper components in g3.
.mat-mdc-chip-set {
  display: flex;

  &:focus {
    outline: none;
  }

  .mdc-evolution-chip-set__chips {
    min-width: 100%;
    margin-left: -8px;
    margin-right: 0;
  }

  .mdc-evolution-chip {
    margin: 4px 0 4px 8px;
  }

  [dir='rtl'] & {
    .mdc-evolution-chip-set__chips {
      margin-left: 0;
      margin-right: -8px;
    }

    .mdc-evolution-chip {
      margin-left: 0;
      margin-right: 8px;
    }
  }
}

.mdc-evolution-chip-set__chips {
  display: flex;
  flex-flow: wrap;
  min-width: 0;
}

// Angular Material supports vertically-stacked chips, which MDC does not.
.mat-mdc-chip-set-stacked {
  flex-direction: column;
  align-items: flex-start;

  .mat-mdc-chip {
    width: 100%;
  }

  .mdc-evolution-chip__graphic {
    flex-grow: 0;
  }

  .mdc-evolution-chip__action--primary {
    flex-basis: 100%;
    justify-content: start;
  }
}

input.mat-mdc-chip-input {
  flex: 1 0 150px;
  margin-left: 8px;

  [dir='rtl'] & {
    margin-left: 0;
    margin-right: 8px;
  }
}