.KeyValueItem {
  border-radius: var(--radius-6);
  transition:
    background-color var(--motion-transition-fast),
    color var(--motion-transition-fast);

  &:where(.singleline) {
    display: flex;
    align-items: flex-start;

    & :where(.KeyItemWrapper) {
      overflow: hidden;
      flex: 1;
    }

    & :where(.ValueItemWrapper) {
      overflow: hidden;
      flex: 2;
      justify-content: space-between;
      min-height: 28px;
    }
  }

  &:where(.multiline) {
    display: flex;
    flex-direction: column;
    justify-content: center;

    & :where(.KeyItemWrapper) {
      flex: 1;
      justify-content: space-between;
      height: 28px;
    }

    & :where(.ValueItemWrapper) {
      flex: 1;
      min-height: 28px;
    }
  }
}

.ItemWrapper {
  overflow: hidden;
  display: flex;
  align-items: flex-start;

  box-sizing: border-box;
  padding: 4px 6px;

  border-radius: var(--radius-6);

  &:where(.clickable) {
    cursor: pointer;

    &:hover {
      background-color: var(--color-fill-neutral-light);
    }
  }
}

.KeyItem {
  overflow: hidden;
  display: flex;
  align-items: center;
}

.KeyText {
  margin-left: 8px;
}

.ValueItem {
  flex: 1;

  /* To avoid inheritance issues with the internal `Text` color */
  color: var(--color-text-neutral);
}

.ItemAction {
  display: flex;
  align-items: center;
}