:host {
  display: inline-flex;
  padding: 8px 16px;

  &.mx-key-value {
    .mx-key {
      display: flex;
      align-items: center;
    }

    &-vertical {
      flex-direction: column;
    }

    &-horizontal {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 4px;
      padding: 0;
      .mx-value {
        flex: 1;
      }
    }

    label {
      display: flex;
      align-items: center;
      gap: 4px;
    }
  }
}

.mat-icon {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}